How to show first n characters in JavaScript or TypeScript string

To get a substring from a string in JavaScript or TypeScript, you have as option three different methods to call. Besides TypeScript compiling to JavaScript, 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 differences between the individual methods.

Slice()

var string = "1234567890"
var substr=string.slice(4);
console.log(substr);
// expected output : "567890"

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

var string = "1234567890"
var substr = string.slice(0, 4);
console.log(substr);
// expected 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);
// expected output : "890"

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

Substr()

var string = "1234567890"
var substr=string.substr(4);
console.log(substr);
// expected output : "567890"

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

var string = "1234567890"
var substr = string.substr(0, 4);
console.log(substr);
// expected 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);
// expected output : "890"

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

Substring()

var string = "1234567890"
var substr=string.substring(4);
console.log(substr);
// expected output : "567890"

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

var string = "1234567890"
var substr = string.substring(0, 4);
console.log(substr);
// expected 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).

This entry was posted in Language basics and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.