HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

JavaScript String Methods

❮ Previous Next ❯
String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
 String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

Note : String search methods are covered in the next chapter.

JavaScript String Length

The length property tells you how long a string is.

Extracting String Characters

There are 4 methods for extracting string characters:

Extracting String Parts

There are three ways to get a piece of text:

  • The at(position) Method
  • The charAt(position) Method
  • The charCodeAt(position) Method
  • Using property access [] like in arrays

JavaScript String charAt()

The charAt() function gives you the character found at a particular position in a string.

JavaScript String charCodeAt()

The charCodeAt() method gives the code of a character in a string at a certain position.

The function gives back a number between 0 and 65535, known as a UTF-16 code.

JavaScript String at()

In ES2022, a new feature was added for strings called the at() method.

The at() method gives you the letter at a certain position in a sentence.

The at() method works on all new web browsers starting from March 2022.

Note The at() method is something new in JavaScript.

It lets you use negative numbers to find characters, whereas charAt() doesn't.

Now you can write myString.at(-2) instead of charAt(myString.length-2).

Property Access [ ]

Note : Accessing property values could sometimes be somewhat uncertain.

  • It transforms strings to resemble arrays, though they remain distinct entities.
  • If there's no character, [ ] shows nothing, but charAt() shows an empty space.

Extracting String Parts

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

JavaScript String slice()

The slice() function takes a piece of text (a string) and gives you back just that piece in a new string.

The method takes 2 parameters: start position, and end position (end not included).

Note : JavaScript counts positions from zero.

First position is 0.

Second position is 1.

JavaScript String substring()

substring() is much like slice().

The change here is that if you have numbers less than 0 for the start and end values in the "substring()" function, they will be considered as 0.

If you don't include the second part, substring() will take everything from that point till the end of the string.

JavaScript String substr()

The code substr() works much like slice().

The thing to note here is that the second parameter tells us how long the extracted part should be.

If you don't provide a second value, substr() will cut out the remaining part of the string.

If the initial value is a negative number, then the counting starts from the last part of the string.

Converting to Upper and Lower Case

You can make a string all uppercase by using the toUpperCase() function.

You can change a string to lowercase using toLowerCase().

JavaScript String toUpperCase()

JavaScript String toLowerCase()

JavaScript String concat()

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

You can use the concat() method instead of the plus sign (+). These two lines achieve the same result:

Example

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

Note

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.

JavaScript String trim()

The trim() function takes a string and gets rid of any extra spaces at the beginning and end of it.

JavaScript String trimStart()

In 2019, a new update to JavaScript called "ECMAScript 2019" introduced a new function for working with strings. This function is called "trimStart()" and it helps you remove spaces or white spaces from the beginning of a string.

The trimStart() function is similar to trim(), but it only takes away spaces from the beginning of a text.

JavaScript String trimEnd()

In 2019, ECMAScript introduced a new function called `trimEnd()` to JavaScript.

The trimEnd() function is similar to trim(), but it only erases empty spaces at the end of a text.

JavaScript String Padding

ECMAScript 2017 added two new string methods to JavaScript: padStart() and padEnd() to support padding at the beginning and at the end of a string.

JavaScript String padStart()

The padStart() function adds extra characters to the beginning of a text.

This code adds more of one string to another string until the second string becomes a specific length.

Note : The padStart() method is a string method.

To pad a number, convert the number to a string first.

See the example below.

JavaScript String padEnd()

The padEnd() function adds extra characters to the end of a string.

It adds extra copies of one string to the end of another string until the resulting string is as long as you want it to be.

Note : The padEnd() method is a string method.

To pad a number, convert the number to a string first.

See the example below.

JavaScript String repeat()

The repeat() method gives back a string containing multiple copies of another string.

The repeat() method gives back a fresh string.

The repeat() function doesn't alter the original text.

Replacing String Content

The replace() method is used to swap one value with another value in a text.

Note : The replace() method does not change the string it is called on.

The replace() method returns a new string.

The replace() method replaces only the first match

If you want to replace all matches, use a regular expression with the /g flag set. See examples below.

The replace() method usually changes just the initial match.

The standard behavior of the replace() method is that it pays attention to letter case. So, if you try to replace "MICROSOFT" with uppercase letters, it won't succeed.

To make a comparison that doesn't care about capital letters, you can use a special kind of pattern called a 'regular expression' with a '/i' flag (which stands for 'insensitive'):

Note : Regular expressions are written without quotes.

To change every occurrence, employ a 'regular expression' with a '/g' flag (for global matching):

Note : You will learn a lot more about regular expressions in the chapter JavaScript Regular Expressions.

JavaScript String ReplaceAll()

In 2021, JavaScript added a new function for working with text called replaceAll():

The replaceAll() method lets you use a special code pattern instead of a plain text to replace something.

If you're using a regular expression as a parameter, make sure it has the 'g' (global) flag enabled. If it's not set, you'll encounter a TypeError.

Note : replaceAll() is an ES2021 feature.

replaceAll() does not work in Internet Explorer.
❮ Previous Next ❯