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:
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:
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:
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:
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:
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:
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:
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:
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.
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:
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:
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:
referenceStr.localeCompare(compareString, locales, options)
It returns the following values depending on whether referenceStr comes before compareStr:
- Negative when the
referenceStroccurs beforecompareStr - Positive when the
referenceStroccurs aftercompareStr - 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:
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:
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:
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:
const str = 'foo';
const re = /foo/i;
const found = str.match(re);
console.log(found);
If we run the code above, we get:
[
"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:
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:
[
"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:
[
"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:
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:
[
[
"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:
const re = /[A-Z]/;
const found = [...str.matchAll(re)];
console.log(found);
console.log(JSON.stringify(found, (key, value) => value, 2));
Then we get:
[
[
"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.
Top comments (0)