Curriculum
Course: JavaScript Basic
Login

Curriculum

JavaScript Basic

JSHome

0/216
Text lesson

JS String Method

Basic String Methods

JavaScript strings are primitive and immutable, meaning all string methods generate a new string without modifying the original.

Basic String Methods include:

  • String length
  • String charAt()
  • String charCodeAt()
  • String at()
  • String [ ]
  • String slice()
  • String substring()
  • String substr()

Additional methods:

  • String Search Methods
  • String Templates
  • String toUpperCase()
  • String toLowerCase()
  • String concat()
  • String trim()
  • String trimStart()
  • String trimEnd()
  • String padStart()
  • String padEnd()
  • String repeat()
  • String replace()
  • String replaceAll()
  • String split()

JavaScript String Length

The length property retrieves the length of a string.

Example

let text = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
let length = text.length;

Extracting String Characters

Four methods are available for extracting string characters:

  • The at(position) Method
  • The charAt(position) Method
  • The charCodeAt(position) Method
  • Utilizing property access [] similar to arrays

JavaScript String charAt()

The charAt() method retrieves the character located at a designated index (position) within a string.

Example

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

JavaScript String charCodeAt()

The charCodeAt() method retrieves the code of the character positioned at a specified index within a string.

This method returns a UTF-16 code, represented as an integer ranging from 0 to 65535.

Example

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

JavaScript String at()

The at() method was introduced in ES2022 for strings.

Example

Retrieve the third letter from the variable name.

const name = “Code7Schools”;
let letter = name.at(2);

Obtain the third letter from the variable “name”.

const name = “Code7Schools”;
let letter = name[2];

The at() method retrieves the character located at a specified index (position) within a string.

Since March 2022, the at() method has been supported in all modern browsers.

Note:

The at() method is a recent addition to JavaScript that introduces support for negative indexes, a feature not available in charAt().

Now, instead of using charAt(myString.length-2), you can employ myString.at(-2).

Browser Support

The at() method is a feature introduced in ES2022.

JavaScript 2022 (ES2022) is supported in all modern browsers since March 2023.

IMG_4135

Property Access [ ]

Example

let text = “HELLO WORLD”;
let char = text[0];

Note

Property access can exhibit some unpredictability:

  • It can make strings appear similar to arrays (though they are not).
  • When no character is found, [ ] returns undefined, whereas charAt() returns an empty string.
  • Property access is read-only. For instance, attempting to modify a string using str[0] = “A” does not produce an error but fails to execute the modification.

Example

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

Extracting String Parts

Three methods are available for extracting a portion of a string:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

JavaScript String slice()

The slice() method extracts a segment of a string and furnishes the extracted portion as a new string.

This method requires two parameters: the starting position and the ending position (excluding the end position).

Example

Extract a segment of a string starting from position 7 to position 13 using the slice method.

let text = “Apple, Banana, Kiwi”;
let part = text.slice(713);

Note:

In JavaScript, counting positions begins from zero.

The initial position is denoted as 0, while the subsequent position is referred to as 1.

Example

When you exclude the second parameter, the method will slice out the remaining portion of the string.

let text = “Apple, Banana, Kiwi”;
let part = text.slice(7);

When a parameter is negative, the position is counted from the end of the string.

let text = “Apple, Banana, Kiwi”;
let part = text.slice(-12);

This example extracts a segment of a string from the position 12 characters from the end to the position 6 characters from the end.

let text = “Apple, Banana, Kiwi”;
let part = text.slice(-12, –6);

JavaScript String substring()

substring() operates similarly to slice().

However, in substring(), if start or end values are less than 0, they are treated as 0.

Example

let str = “Apple, Banana, Kiwi”;
let part = str.substring(713);

If you exclude the second parameter, substring() will extract the remaining part of the string.

JavaScript String substr()

substr() functions similarly to slice().

However, in substr(), the second parameter indicates the length of the extracted segment.

Example

let str = “Apple, Banana, Kiwi”;
let part = str.substr(76);

If you exclude the second parameter, substr() will extract the remaining portion of the string.

Example

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

When the first parameter is negative, the position is counted from the end of the string.

Example

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

Converting to Upper and Lower Case

You can convert a string to uppercase using toUpperCase() and to lowercase using toLowerCase().

JavaScript String toUpperCase()

Example

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

JavaScript String toLowerCase()

Example

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

JavaScript String concat()

The concat() method combines two or more strings together.

Example

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

The concat() method serves as an alternative to the plus operator. The following lines achieve the same result:

Example

text = “Hello” + ” “ + “World!”;
text = “Hello”.concat(” ““World!”);

Note

All string methods generate a new string and do not alter the original string.

In formal terms:

Strings are immutable, meaning they cannot be modified; they can only be replaced.

JavaScript String trim()

The trim() method eliminates whitespace from both ends of a string.

Example

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

JavaScript String trimStart()

In ECMAScript 2019, the String method trimStart() was introduced to JavaScript.

trimStart() functions similarly to trim(), but exclusively removes whitespace from the beginning of a string.

Example

let text1 = ”     Hello World!     “;
let text2 = text1.trimStart();

Support for JavaScript String trimStart() is available in all modern browsers as of January 2020.

IMG_4130

JavaScript String trimEnd()

In ECMAScript 2019, the string method trimEnd() was introduced to JavaScript.

trimEnd() functions similarly to trim(), but exclusively eliminates whitespace from the end of a string.

Example

let text1 = ”     Hello World!     “;
let text2 = text1.trimEnd();

JavaScript String trimEnd() has been supported in all modern browsers since January 2020.

IMG_4130