4.1.1 JS String Methods

JavaScript String Length

The length property returns the length of a string:

Example 1: JS Strings length Property

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

JavaScript String slice()

• slice() extracts a part of a string and returns the extracted part in a new string.
• The method takes 2 parameters: the start position, and the end position (end not included).

Example 2: JS Strings slice()

Slice out a portion of a string from position 7 to position 13 (13 not included):

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

• If a parameter is negative, the position is counted from the end of the string.
• This example slices out a portion of a string from position -12 to position -6:

Example 3: JS Strings The slice() Method

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

If you omit the second parameter, the method will slice out the rest of the string:

Example 4: JS Strings The slice() Method part 2

let part = str.slice(7);

or, counting from the end:

Example 5: JS Strings The slice() Method part 3

let part = str.slice(-12);

JavaScript String substring()

• substring() is similar to slice().
• The difference is that start and end values less than 0 are treated as 0 in substring().

Example 6: JS Strings the substring() method

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

If you omit the second parameter, substring() will slice out the rest of the string.

JavaScript String substr()

• substr() is similar to slice().
• The difference is that the second parameter specifies the length of the extracted part.

Example 7: JS Strings the substr() method

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

If you omit the second parameter, substr() will slice out the rest of the string.

Example 8: JS Strings the substr() method part 2

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

If the first parameter is negative, the position counts from the end of the string.

Example 9: JS Strings the substr() method part 3

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Replacing String Content

The replace() method replaces a specified value with another value in a string:

Example 10: JS Strings the replace() method part 1

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

By default, the replace() method replaces only the first match:

Example 11: JS Strings the replace() method part 2

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case) will not work:

Example 12: JS Strings the replace() method part 3

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

To replace case insensitive, use a regular expression with an /i flag (insensitive):

Example 13: JS Strings the replace() method part 4

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

To replace all matches, use a regular expression with a /g flag (global match):

Example 14: JS Strings the replace() method part 5

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

JavaScript String toUpperCase()

Example 15: JS Strings Convert string part 1

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript String toLowerCase()

Example 16: JS Strings Convert string part 2

 let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower 

JavaScript String concat()

concat() joins two or more strings:

Example 17: JS Strings Convert string part 3

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

The concat() method can be used instead of the plus operator. These two lines do the same:

Example 18:

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!"); 

JavaScript String trim()

The trim() method removes whitespace from both sides of a string:

Example 19; JS Strings Convert string part 4

let text1 = "      Hello World!      ";
let text2 = text1.trim();

JavaScript String padStart()

The padStart() method pads a string with another string:

Example 20: JS Strings The padStart() Method part 1

let text = "5";
let padded = text.padStart(4,"x");

Example 21: JS Strings The padStart() Method part 2

let text = "5";
let padded = text.padStart(4,"0");

Example 22: JS Strings The padStart() Method part 3

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

JavaScript String padEnd()

The padEnd() method pads a string with another string:

Example 23: JS Strings The padEnd() Method part 1

let text = "5";
let padded = text.padEnd(4,"x");

Example 24: JS Strings The padEnd() Method part 2

let text = "5";
let padded = text.padEnd(4,"0");

Example 25: JS Strings The padEnd() Method part 3

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

Browser Support

• padEnd() is an ECMAScript 2017 feature.
• It is supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

padEnd() is not supported in Internet Explorer.

JavaScript String charAt()

The charAt() method returns the character at a specified index (position) in a string:

Example 26: JS Strings The charAt() Method

let text = "HELLO WORLD";
let char = text.charAt(0);

JavaScript String charCodeAt()

• The charCodeAt() method returns the unicode of the character at a specified index in a string:
• The method returns a UTF-16 code (an integer between 0 and 65535).

Example 27: JS Strings The charCodeAt() Method

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Property Access

ECMAScript 5 (2009) allows property access [ ] on strings:

Example 28: JS Strings Property Access part 1

let text = "HELLO WORLD";
let char = text[0];

Example 29: JS Strings Property access part 2

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example 30: JS String Methods String split() part 1

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe 

• If the separator is omitted, the returned array will contain the whole string in index [0].
• If the separator is "", the returned array will be an array of single characters:

Example 31: JS String Methods String split() part 2

text.split("")

JavaScript String indexOf()

Example 32: JS String The indexOf() Method

Search a string for "welcome":

let text = "Hello world, welcome to the universe.";
let result = text.indexOf("welcome");