How to show first n characters in JavaScript or TypeScript string

To get a substring from a string in JavaScript or TypeScript, you have three different methods to call as an option. Besides TypeScript compiling to JavaScript, the method’s names a behaviour stay the same.

What is the difference between slice(), substr() and substring() string methods?

The slice() method extracts parts of a string and returns the extracted parts in a new string. slice() does not change original string.

Syntax

string.slice(start_position, end_position_excluded)

The substr() method extracts parts of a string, beginning at the character at the specified position, and returns the limited number of characters. substr() does not change original string.

Syntax

string.substr(start_position, length)

The substring() method extracts parts of a string and returns the extracted parts in a new string. substring() does not change original string.

Syntax

string.substring(start_position, end_position_excluded)

As a conclusion we can say that there is a difference between slice() and substr(), while substring() is basically a copy of slice().

Let’s take a better look at the differences between the individual methods.

Slice()

var string = "1234567890"
var substr=string.slice(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.slice(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument exclude the argument position (upper bound excluded).

var string = "1234567890"
var substr = string.slice(-4);
console.log(substr);

Output

890

substr(-4) will keep the last 4 characters.

Substr()

var string = "1234567890"
var substr=string.substr(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.substr(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument denotes the number of characters to extract.

var string = "1234567890"
var substr = string.substr(-4);
console.log(substr);

Output

890

substr(-4) will keep the last 4 characters.

Substring()

var string = "1234567890"
var substr=string.substring(4);
console.log(substr);

Output

567890

substr(4) will remain everything after first 4 characters.

var string = "1234567890"
var substr = string.substring(0, 4);
console.log(substr);

Output

1234

substr(0, 4) will keep the first 4 characters. Second argument exclude the argument position (upper bound excluded).

General note regarding indexes in all 3 methods: Strings are arrays of characters. Therefore they start character order from 0.

Conclusion

As you can see, using substring is nearly identical to split() or substr() method. However there are some small differences. For example substring() does not have option to add negative number and count string split backwards. Also if first argument is greater than the second, substring will swap the two arguments, and perform as usual.

Basically, if you know the the position (index) on which you will start and the length of the of characters to be extracted, use subst(start_position, length). Otherwise if you know the position (index) you want to start and end, but NOT include the end position, use slice(start_position, end_position_excluded).