String Methods and Properties

Primitive values, like "John Doe", cannot have properties or methods (because they are not objects).

But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.


String Length

The length property of a String object contains the length of the string, in UTF-16 code units. length is a read-only data property of string instances.

The length property returns the length of a string:

EXAMPLE ❯


Extracting String Parts

There are 3 methods for extracting a part of a string:

   slice(start, end)

   substring(start, end)

    substr(start, length)


The slice() Method

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

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).

This example slices out a portion of a string from position 7 to position 12 (13-1):

EXAMPLE ❯


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 ❯


The substring() Method

The substr() method returns a portion of the string, starting at the specified index and extending for a given number of characters afterwards.

substring() is similar to slice().

The difference is that substring() cannot accept negative indexes.

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

EXAMPLE ❯


The substr() Method

substr() is similar to slice().

The difference is that the second parameter specifies the length of the extracted part.

EXAMPLE ❯


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

EXAMPLE ❯


Replacing String Content

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

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

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

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

EXAMPLE ❯


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

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

EXAMPLE ❯


Converting to Upper and Lower Case

JavaScript provides two helpful functions for converting text to uppercase and lowercase.

String.toLowerCase() converts a string to lowercase, and String.toUpperCase() converts a string to uppercase.

A string is converted to upper case with toUpperCase():

EXAMPLE ❯


A string is converted to lower case with toLowerCase():

EXAMPLE ❯


The concat() Method

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

concat() joins two or more strings:

EXAMPLE ❯


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

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


String.trim()

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

The trim() method removes whitespace from both ends of a string. Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (LF, CR, etc.).

EXAMPLE ❯


JavaScript String Padding

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

EXAMPLE ❯


Extracting String Characters

There are 3 methods for extracting string characters:

   charAt(position)

   charCodeAt(position)

   Property access [ ]


The charAt() Method

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

The index of the first character is 0, the second character is 1, and so on. The index of the last character in a string is string. length-1, the second last character is string.

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

EXAMPLE ❯


The charCodeAt() Method

In JavaScript, charCodeAt() is a string method that is used to retrieve a Unicode value for a character at a specific position in a string. Because the charCodeAt() method is a method of the String object, it must be invoked through a particular instance of the String class.

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 ❯


Converting a String to an Array

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

JavaScript comes with a few handy functions to facilitate converting strings to arrays, as it’s a common practice.

Initially, the only method available for this was split(). However, after the addition of ES6, alternative methods were introduced that could be used to convert string to array.

Although in this tutorial we focus on the method using split(), the other methods that can be used are SpreadObject.assign, and Array.from.

EXAMPLE ❯


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 ❯