Flash cards
Review the key moves
What is the main idea behind JavaScript String Methods?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";Put the learning moves in the order that makes the concept easiest to apply.
Basic String Methods
Javascript strings are primitive and immutable: All string methods produce a new string without altering the original string.
| String length String charAt() String charCodeAt() String codePointAt() String concat() String at() String [ ] String slice() String substring() String substr() String toUpperCase() String toLowerCase() | String isWellFormed() String toWellFormed() String trim() String trimStart() String trimEnd() String padStart() String padEnd() String repeat() String replace() String replaceAll() String split() |
|---|
JavaScript String Length
The length property returns the length of a string:
Example
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;Extracting String Characters
There are 4 methods for extracting string characters:
- The at( position ) Method
- The charAt( position ) Method
- The charCodeAt( position ) Method
- Using property access [] like in arrays
JavaScript String charAt()
The charAt() method returns the character at a specified index (position) in a string:
Example
let text = "HELLO WORLD";
let char = text.charAt(0);JavaScript String charCodeAt()
The charCodeAt() method returns the code of the character at a specified index in a string:
The method returns a UTF-16 code (an integer between 0 and 65535).
Example
let text = "HELLO WORLD";
let char = text.charCodeAt(0);JavaScript codePointAt()
Examples
let text = "HELLO WORLD";
let code = text.codePointAt(0);JavaScript String at()
Examples
const name = "ExampleSite";
let letter = name.at(2);ES2022 introduced the string method at()
The at() method returns the character at a specified index (position) in a string.
The at() method is supported in all modern browsers since March 2022:
The at() method is a new addition to JavaScript.
It allows the use of negative indexes while charAt() do not.
Browser Support
at() is an ECMAScript 2022 feature.
JavaScript 2022 is supported in all modern browsers since March 2022 :
| Chrome 92 | Edge 92 | Firefox 90 | Safari 15.4 | Opera 78 |
|---|---|---|---|---|
| Apr 2021 | Jul 2021 | Jul 2021 | Mar 2022 | Aug 2021 |
Property Access [ ]
Example
let text = "HELLO WORLD";
let char = text[0];Property access might be a little unpredictable:
- It makes strings look like arrays (but they are not)
- If no character is found, [ ] returns undefined, while charAt() returns an empty string.
- It is read only. str[0] = "A" gives no error (but does not work!)
Example
let text = "HELLO WORLD";
text[0] = "A"; // Gives no error, but does not workJavaScript String concat()
concat() joins two or more strings:
Example
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
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");All string methods return a new string. They don't modify the original string.
Formally said
Strings are immutable: Strings cannot be changed, only replaced.
Extracting String Parts
There are 3 methods for extracting a part of a string:
- slice( start , end )
- substring( start , end )
- substr( start , 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: start position, and end position (end not included).
Example
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);JavaScript counts positions from zero.
First position is 0.
Second position is 1.
Examples
let text = "Apple, Banana, Kiwi";
let part = text.slice(7);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
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.
Warning
The substr() method is removed (deprecated) in the latest JavaScript standard.
Use substring() or slice() instead.
Example
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
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
let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);Converting to Upper and Lower Case
A string is converted to upper case with toUpperCase() :
A string is converted to lower case with 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 lowerJavaScript String isWellFormed()
The isWellFormed() method returns true if a string is well formed.
Otherwise it returns false .
A string is not well formed if it contains lone surrogates .
Examples
let text = "Hello world!";
let result = text.isWellFormed();Lone Surrogates
A lone surrogate is a Unicode surrogate code point that is not part of a valid surrogate pair used to represent characters in UTF-16 encoding.
JavaScript String toWellFormed()
Examples
let text = "Hello World \uD800";
let result = text.toWellFormed();JavaScript String trim()
The trim() method removes whitespace from both sides of a string:
Example
let text1 = " Hello World! ";
let text2 = text1.trim();JavaScript String trimStart()
The trimStart() method works like trim() , but removes whitespace only from the start of a string.
Example
let text1 = " Hello World! ";
let text2 = text1.trimStart();Browser Support
trimStart() is an ECMAScript 2019 feature.
ES2019 is supported in all modern browsers since January 2020 :
| Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
|---|---|---|---|---|
| Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
JavaScript String trimEnd()
The trimEnd() method works like trim() , but removes whitespace only from the end of a string.
Example
let text1 = " Hello World! ";
let text2 = text1.trimEnd();