List of JavaScript String Methods and How to Use Them
Tags: javascript, beginners, oop, webdev
Published: 2020-01-05 22:15:34

Strings are an important global object in JavaScript. They represent a sequence of characters. They can be used by various operators, like comparison operators, and there are various methods that can be used to manipulate them. There are different ways to manipulate strings, look up parts of a string in various positions, and trim and replace strings. With each release of the JavaScript specification, more methods are added to make string search and manipulating easier than ever.

* * *

Static Methods
==============

Static methods are called without having to create a string literal or object. There are the following methods:

`String.fromCharCode()`
-----------------------

With the `fromCharCode` method, we can construct a string by passing in a comma-separated list of HTML character codes or the hexadecimal Unicode character code as arguments and get a string with the actual characters returned. For example, we can write:

```javascript
const str = String.fromCharCode(38, 8226)
```

Then, we get `&•` when we log `str` with `console.log`. We can pass in hexadecimal character codes, like in the following code:

```javascript
const str = String.fromCharCode(0x0026, 0x2022)
```

Then, we also get `&•` when we log `str` with `console.log`.

String.fromCodePoint()
----------------------

The `String.fromCodePoint()` method returns a string given by the character codes that you entered into the arguments. The code points can be HTML character codes or the hexadecimal Unicode character code. For example, we can write:

```javascript
const str = String.fromCodePoint(38, 8226)
```

Then, we get `&•` when we log `str` with `console.log`. We can pass in hexadecimal character codes, like in the following code:

```javascript
const str = String.fromCodePoint(0x0026, 0x2022)
```

Then, we also get `&•` when we log `str` with `console.log`.

* * *

Instance Methods
================

Instance methods of a string are called on the string literal or the string object. They do something to the instance of the string that’s being called on.

String.charAt()
---------------

`charAt` returns the character located at the index of the string.

For example:

```javascript
const str = "Hello";  
const res = str.charAt(0); // 'H'
```

String.charCodeAt()
-------------------

`charCodeAt` returns the UTF-16 character code located at the index of the string.

For example:

```
const str = "Hello";  
const res = str.charCodeAt(0); // 72
```

String.codePointAt()
--------------------

`codePointAt` returns the code point value of the UTF-16 encoded code point located at the index of the string.

For example:

```javascript
const str = "Hello";  
const res = str.codePointAt(0); // 72
```

String.concat()
---------------

The `concat` method combines two strings and returns a new string. For example, we can write:

```javascript
const str1 = "Hello";  
const str2 = " World";  
const res = str1.concat(str2); // 'Hello World'
```

String.endsWith()
-----------------

`endsWith` checks if a string ends with the substring you passed in.

For example:

```javascript
const str = "Hello world.";  
const hasHello = str.endsWith("world."); // trueconst str2 = "Hello world.";  
const hasHello2 = str.endsWith("abc"); // false
```

String.includes()
-----------------

`includes` checks if the passed-in substring is in the string. It returns `true` if it’s in the string, and `false` otherwise.

```javascript
const str = "Hello";  
const hasH = str.includes('H'); // true  
const hasW = str.includes('W'); // false
```

String.indexOf()
----------------

`indexOf` finds the index of the first occurrence of the substring. It returns -1 if not found.

For example:

```javascript
const str = "Hello Hello.";  
const hasHello = str.indexOf("Hello"); // 0  
const hasHello2 = str.indexOf("abc"); // -1
```

String.lastIndexOf()
--------------------

`lastIndexOf` finds the index of the last occurrence of the substring. It returns -1 if not found.

For example:

```javascript
const str = "Hello Hello.";  
const hasHello = str.lastIndexOf("Hello"); // 6  
const hasHello2 = str.lastIndexOf("abc"); // -1
```

String.localeCompare()
----------------------

The `localeCompare` method compares whether one string comes before another by using the locale’s rules for comparing the order of precedence of the string. The general syntax to call this method is:

```javascript
referenceStr.localeCompare(compareString, locales, options)
```

It returns the following values depending on whether `referenceStr` comes before `compareStr`:

*   Negative when the `referenceStr` occurs before `compareStr`
*   Positive when the `referenceStr` occurs after `compareStr`
*   Returns 0 if they are equivalent

The first argument of the method is the string you want to compare with.

The second argument of the method optionally takes a locale string or an array of locale strings, which are BCP-47 language tag with optional Unicode extension keys. Unicode extension keys, including `"big5han"`, `"dict"`, `"direct"`, `"ducet"`, `"gb2312"`, `"phonebk"`, `"phonetic"`, `"pinyin"`, `"reformed"`, `"searchjl"`, `"stroke"`, `"trad"`, and `"unihan"` are also allowed in our locale strings. They specify the collations that we want to compare strings with. However, when there are fields in the options in the second argument that overlap with this, then the options in the argument overrides the Unicode extension keys specified in the first argument.

Numerical collations can be specified by adding `kn` to your locale string in your first argument. For example, if we want to compare numerical strings, then we can write:

```javascript
console.log('10'.localeCompare('2', 'en-u-kn-true'));
```

Then, we get one since we specified `kn` in the locale string in the constructor. This makes the collator compare numbers, and 10 comes after two.

Also, we can specify whether upper or lowercase letters should be sorted first with the `kf` extension key. The possible options are `upper`, `lower`, or `false`. `false` means that the locale's default will be the option. This option can be set in the locale string by adding it to the locale string as a Unicode extension key, and if both are provided then the `option` property will take precedence. For example, to make uppercase letters have precedence over lowercase letters, we can write:

```javascript
console.log('Able'.localeCompare('able', 'en-ca-u-kf-upper'));
```

This will sort the same word with uppercase letters first. When we run `console.log`, we get -1 since we have an uppercase ‘A’ in ‘Able,’ and a lowercase ‘a’ for ‘able.’ On the other hand, if we instead pass in `en-ca-u-kf-lower` in the constructor, like in the code below:

```javascript
console.log('Able'.localeCompare('able', 'en-ca-u-kf-lower'));
```

Then after `console.log` we get one because `kf-lower` means that we sort the same word with lowercase letters before the ones with uppercase letters.

The third argument of the method optionally takes an object that can have multiple properties. The properties that the object accepts are `localeMatcher`, `usage`, `sensitivity`, `ignorePunctuation`, `numeric`, and `caseFirst`. `numeric` is the same as the `kn` option in the Unicode extension key in the locale string, and `caseFirst` is the same as the `kf` option. The `localeMatcher` option specifies the locale matching algorithm to use. The possible values are `lookup` and `best fit`. The lookup algorithm searches for the locale until it finds the one that fits the character set of the strings that are being compared. `best fit` finds a locale that is possibly more suited than the `lookup` algorithm.

The `usage` option specifies whether the Collator is used for sorting or searching for strings. The default option is `sort`.

The sensitivity option specifies the way that the strings are compared. The possible options are `base`, `accent`, `case`, and `variant`. `base` compares the base of the letter, ignoring the accent. For example, `a` is not the same as `b`, but `a` is the same as `á`, and `a` is the same as `Ä` **.** `accent` specifies that a string is only different if their base letter or their accent is unequal, ignoring case. So, `a` isn’t the same as `b`, but `a` is the same as `A`. `a` is not the same as `á`.

The `case` option specifies that strings that are different in their base letters or case are considered unequal, and so `a` wouldn’t be the same as `A` and `a` wouldn’t be the same as `c`, but `a` is the same as `á`. `variant` means that strings that have different base letters, accents, other marks, or cases are considered unequal. For example, `a` wouldn’t be the same as `A` and `a` wouldn’t be the same as `c`, but `a` also wouldn't be the same as `á`.

The `ignorePunctuation` specifies whether punctuation should be ignored when sorting strings. It’s a boolean property and the default value is `false`.

String.match()
--------------

The `match` method retrieves the substring matches of a string given the regular expression to match with. The `match` method takes a regular expression as an argument. It can either be a regular expression literal or a `RegExp` object. If no regular expression is given, we’ll get an array with an empty string. If the regular has the `g` flag, then all the matches in a string will be returned in the array. Otherwise, only the first will be returned.

The matches are returned as an array. For example, we can do a case insensitive search with the `i` flag:

```javascript
const str = 'foo';  
const re = /foo/i;  
const found = str.match(re);  
console.log(found);
```

If we run the code above, we get:

```javascript
[  
  "foo"  
]
```

from the `console.log` statement above.

If we toggle the `g` flag on and off, we get different results. If the regular has the `g` flag, then all the matches in a string will be returned in the array. Otherwise, only the first will be returned. If we have the `g` flag on like in the code below:

```javascript
const str = 'The quick brown fox jumps over the lazy dog. It barked.';  
const globalRe = /[A-Z]/g;  
const globalFound = str.match(globalRe);  
console.log(globalFound);  
console.log(JSON.stringify(globalFound, (key, value) => value, 2));
```

Then we get:

```javascript
[  
  "T",  
  "I"  
]
```

from the `console.log` statement above. However, if we removed the `g` flag, like in the code below:

```
const re = /[A-Z]/;  
const found = str.match(re);  
console.log(found);  
console.log(JSON.stringify(found, (key, value) => value, 2));
```

Then we get:

```javascript
[  
  "T"  
]
```

from the `console.log` statement above.

String.matchAll()
-----------------

The `matchAll` method would return all the results that are found by passing in a regular expression to the argument of the `matchAll` method. It returns an iterator with arrays of the result as the array entries. For example, if we have the following code to do a global search:

```javascript
const str = 'The quick brown fox jumps over the lazy dog. It barked.';  
const globalRe = /[A-Z]/g;  
const globalFound = [...str.matchAll(globalRe)];  
console.log(globalFound);  
console.log(JSON.stringify(globalFound, (key, value) => value, 2));
```

Then we get:

```javascript
[  
  [  
    "T"  
  ],  
  [  
    "I"  
  ]  
]
```

On the other hand, if we don’t have the global flag in the regular expression to do a global search, like in the following code:

```javascript
const re = /[A-Z]/;  
const found = [...str.matchAll(re)];  
console.log(found);  
console.log(JSON.stringify(found, (key, value) => value, 2));
```

Then we get:

```javascript
[  
  [  
    "T"  
  ]  
]
```

from the `console.log` statement above.

* * *

Strings are an important global object in JavaScript. They represent a sequence of characters. There are methods to manipulate strings, look up parts of a string in various positions, and trim and replace strings. With each release of the JavaScript specification, more methods are added to make string search and manipulating easier than ever. Stay tuned for Part 2 of the list.