This article lists the operations of JavaScript String and the things you want to know about it. Treat it as a reference list.
About String in JavaScript
As in other programming languages, a string in JavaScript is also a sequence of characters.
A Sting is one of the seven primitive data types in JavaScript and String object is a wrapper for a String primitive.
A set of 16-bit unsigned integer values
It is a set of “elements” of 16-bit unsigned integer values.
Immutable
Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.
String primitives and String objects
JavaScript automatically converts primitives to String objects, so that it’s possible to use String object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.
let s_prim = 'foo'
let s_obj = new String(s_prim)
console.log(typeof s_prim) // Logs "string"
console.log(typeof s_obj) // Logs "object"
String primitives and String objects also give different results when using eval(). Primitives passed to eval are treated as source code; String objects are treated as all other objects are, by returning the object. For example:
let s1 = '2 + 2' // creates a string primitive
let s2 = new String('2 + 2') // creates a String object
console.log(eval(s1)) // returns the number 4
console.log(eval(s2)) // returns the string "2 + 2"
A String object can always be converted to its primitive counterpart with the valueOf() method.
console.log(eval(s2.valueOf())) // returns the number 4
| Code |
Output |
| “ |
U+0000 NULL character |
' |
single quote |
" |
double quote |
\ |
backslash |
n |
new line |
r |
carriage return |
v |
vertical tab |
t |
tab |
b |
backspace |
f |
form feed |
uXXXX (where XXXX is 4 hex digits; range of 0x0000–0xFFFF) |
UTF-16 code unit / Unicode code point between U+0000 and U+FFFF |
u{X} … u{XXXXXX} (where X…XXXXXX is 1–6 hex digits; range of 0x0–0x10FFFF) |
UTF-32 code unit / Unicode code point between U+0000 and U+10FFFF |
xXX (where XX is 2 hex digits; range of 0x00–0xFF) |
ISO-8859-1 character / Unicode code point between U+0000 and U+00FF |
Basic operations
Create strings
Strings can be created as primitives from string literals, or as object using String() constructor. In most situations, they can be used interchangeably.
const str1 = 'Hello';
const str2 = "World";
const str3 = `A template string`;
const str4 = new String('A string object');
A string literal can be enclosed by single quotes '' or double quotes"", both of them are treated identically. Or you can use a pair of backticks ““ to create a template string (or a template literal).
Template literals (Template strings)
Template literals can be useful, below are 2 of the examples:
They can contain placeholders:
let a = 5;
let b = 10;
console.log(`a is ${a}, b is ${b}`); // a is 5, b is 10
console.log(`a * 10 times: ${a.repeat(10)}`); // a * 10 times: aaaaaaaaaa
They can be used to represent multiple lines in a direct way:
console.log(`string text line 1
string text line 2`);
Multiple line of strings
There are several ways to represent multiple line of string or long strings in JavaScript.
1.Use + to append multiple strings together:
let longString = "This is a very long string which needs " +
"to wrap across multiple lines because " +
"otherwise my code is unreadable.";
2.Use the backslash character (“) at the end of each line to indicate that the string will continue on the next line:
let longString = "This is a very long string which needs
to wrap across multiple lines because
otherwise my code is unreadable.";
3.Use a template string:
let longString = `This is a very long string which needs
to wrap across multiple lines because
otherwise my code is unreadable.`;
Length
const str1 = 'Hello';
console.log(str1.length); // 5
Access characters or elements
To access an individual character:
return 'cat'.charAt(1); // returns "a"
// Or
return 'cat'[1] // returns "a"
Not it will not succeed to delete or assign a new value via [].
Check
startsWith()
The startsWith(searchString[, position] method determines whether a string begins with the characters of a specified string, returning true or false as appropriate.
- position, the position in this string at which to begin searching for
searchString. Defaults to 0.
const str1 = 'Hello!';
console.log(str1.startsWith('He')); // true
console.log(str1.startsWith('lo', 3)); // true
console.log(str1.startsWith('A')); // false
endsWith()
The endsWith(searchString[, length]) method determines whether a string ends with the characters of a specified string, returning true or false as appropriate.
- length, it is used as the length of
str. Defaults to str.length.
const str1 = 'Hello!';
console.log(str1.endsWith('llo')); // true
console.log(str1.endsWith('llo', 3)); // false
console.log(str1.endsWith('?')); // false
Compare
Use operators to compare two strings.
const a = 'a'
const b = 'b'
console.log( a < b); // true
console.log( a <= b); // true
console.log( a > b); // false
Equal check:
== return true if the operands are equal.=== returns true if the operands are equal and of the same type.
const a = 'Hello';
const b = new String('Hello');
const c = 'hello';
const d = 1;
const f = '1';
//------------- equal: ==
// Compare the strings in a and b for being equal in the usual case-sensitive way.
console.log(a == b); // true
console.log(a == c); // false
console.log(d == f); // true
// Case-insentitive
console.log(c.toUpperCase() == c.toUpperCase()); // true
// ------------ strict equal: ===
console.log(a === b); // false
Concat
+
The concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.
Examples
// +
let a = 'hello';
console.log(a + ' world'); // 'hello world'
console.log(123 + a); // '123hello'
// +=
// The shorthand assignment operator += can also be used to concatenate strings.
a += ' world';
console.log(a); // 'hello world'
contact()
The concat() method concatenates the string arguments to the calling string and returns a new string.
Examples
// To concatenate two or more strings.
const str1 = 'Hello';
const str2 = 'World';
console.log(str1.concat(' ', str2));
// expected output: "Hello World"
console.log(str1.concat(' ', str2, ', ', str1, ' ', str2));
// expected output: "Hello World, Hello World"
Index of
indexOf()
indexOf(searchValue[, fromIndex]) returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
lastIndexOf()
The lastIndexOf(searchValue[, fromIndex]) method returns the index within the calling String object of the last occurrence of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.
Lower, upper
toLowerCase()
The toLowerCase() method returns the calling string value converted to lower case.
const sentence = 'The quick brown fox jumps over the lazy dog.';
console.log(sentence.toLowerCase());
// expected output: "the quick brown fox jumps over the lazy dog."
toUpperCase()
The toUpperCase() method returns the calling string value converted to uppercase (the value will be converted to a string if it isn’t one).
const sentence = 'The quick brown fox jumps over the lazy dog.';
console.log(sentence.toUpperCase());
// expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."
Pad
padEnd()
The padEnd(targetLength [, padString) method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.
- padString, if it is too long to stay within
targetLength, it will be truncated. Default value is " ".
const str1 = 'Breaded Mushrooms';
console.log(str1.padEnd(25, '.'));
// expected output: "Breaded Mushrooms........"
const str2 = '200';
console.log(str2.padEnd(5));
// expected output: "200 "
padStart()
The padStart(targetLength [, padString]) method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.
const str1 = '5';
console.log(str1.padStart(2, '0'));
// expected output: "05"
const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber);
// expected output: "************5581"
Repeat
repeat()
To make a string repeat multiple times:
const a = 'a';
console.log(chorus.repeat(10));
// expected output: "aaaaaaaaaa"
Replace
The replace() and replaceAll return 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.
For replace(), if pattern is a string, only the first occurrence will be replaced.
replace()
The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.
Syntax
replace(regexp|substr, newSubstr|function)
Examples
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"
const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"
replaceAll()
The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement.
Syntax
replaceAll(regexp|substr, newSubstr|function)
Examples
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"
// global flag required when calling replaceAll with regex
const regex = /Dog/ig;
console.log(p.replaceAll(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"
Sub string
There are several methods to extract a port of a string, substring and slice are almost identical except some subtle differences if start is greater than end, or there are negative arguments:
substring(start[, end]), if start is greater than end, substring swaps the two argument.slice(begin[, end]), if begin is greater than (or equal) end, it returns an empty string. If end is negative, it is treated as str.length + endIndex.substr(start[, length]), a legacy feature in ECMAScript. It’s best to avoid using it if possible.
Differences between substring() and slice():
const str = 'Hello';
// If start is greater than end.
console.log(str.substring(5, 2)); // "llo"
console.log(str.slice(5, 2)); // ""
// Negative values.
// Negative start is treated as 0 for substring().
console.log(str.substring(-3, 3)); // "Hel"
// Negative start is treated as str.length -start for slice().
console.log(str.slice(-3, 3)); // "l"
// Negative end is treated as 0;
console.log(str.substring(0, -2)); // ""
// Negative end is treated as str.length + endIndex for slice().
console.log(str.slice(0, -2)); // "Hel"
substring()
The substring(start[, end]) returns the part of the string between the start and end indexes, or to the end of the string.
const str = 'Hello';
console.log(str.substring(1, 3)); // "el"
console.log(str.substring(2)); // "llo"
console.log(str.substring(0, 100)); // "Hello"
// Negative argument is treated as 0.
console.log(str.substring(-3)); // "Hello"
console.log(str.substring(-3, 3)); // "Hel"
// If start is greater than end, the effect of substring() is
// as if the two arguments were swapped.
console.log(100, 1); // "ello"
console.log(100, 10); // ""
console.log(100, 200); // ""
// NaN is treated as 0.
console.log(str.substring('a', 0)); // "H"
console.log(str.substring(0, 'a')); // ""
slice()
const str = 'Hello';
console.log(str.slice(1, 3)); // "el"
console.log(str.slice(2)); // "llo"
console.log(str.slice(0, 100)); // "Hello"
console.log(str.slice(-3)); // "llo"
console.log(str.slice(-3, 3)); // "l"
// NaN is treated as 0.
console.log(str.slice('a', 0)); // "H"
console.log(str.slice(0, 'a')); // ""
substr() (a legacy feature)
substr(start[, length]) returns a portion of the string, starting from the start index and extending for characters of length or ones to the end if length is not specified.
const str = 'Hello';
console.log(str.substr(1, 2)); // "el"
console.log(str.substr(2)); // "llo"
console.log(str.substr(-3)); // "llo"
console.log(str.substr(-3, 2)); // "ll"
// The value of start is capped at str.length if its value is out of range.
console.log(str.substr(-100, 2));// "He"
// If length is negative, it is reated as 0
console.log(str.substr(-3, -2)); // ""
console.log(str.substr(1, -2)); // ""
Search
includes()
The includes(searchString[, position]) method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.
- position, the position within the string at which to begin searching for
searchString. (Defaults to 0.)
const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(sentence.includes(word)); // true
console.log(sentence.includes(word, 20)); // false
search()
The search(regexp) method executes a search for a match between a regular expression and this String object.
If a non-RegExp object regexp is passed, it is implicitly converted to a RegExp with new RegExp(regexp).
const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
// any character that is not a word character or whitespace
const regex = /[^ws]/g;
console.log(paragraph.search(regex));
// expected output: 43
console.log(paragraph[paragraph.search(regex)]);
// expected output: "."
Split
split()
The split([separator[, limit]) method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.
- separator, the
separator can be a simple string or it can be a regular expression.
- limit, the number of substrings to be included in the array. If it is 0,
[] is returned.
const str = 'Welcome to JavaScript world.';
const words = str.split(' '); // words: ["Welcome","to","JavaScript","world."]
const chars = str.split('');
// chars: ["W","e","l","c","o","m","e"," ","t","o"," ","J","a","v","a","S","c","r","i","p","t"," ","w","o","r","l","d","."]
const strCopy = str.split(); // strCopy: ["Welcome to JavaScript world."]
To string
toString()
The toString() method returns a string representing the specified object.
const stringObj = new String('foo');
console.log(stringObj);
// expected output: String { "foo" }
console.log(stringObj.toString());
// expected output: "foo"
Trim
To remove whitespace from both or either of the 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.).
const greeting = ' Hello world! ';
console.log(greeting); // expected output: " Hello world! ";
// To remove whitespace from both ends.
console.log(greeting.trim()); // expected output: "Hello world!";
// To remove whitespace from the beginning
console.log(greeting.trimStart()); // expected output: "Hello world!
// To remove whitespace from the end
console.log(greeting.trimEnd()); // expected output: " Hello world!";
valueOf
valueOf()
The valueOf() method returns the primitive value of a String object.
const stringObj = new String('foo');
console.log(stringObj);
// expected output: String { "foo" }
console.log(stringObj.valueOf());
// expected output: "foo"
Char ↔ Unicode
Unicode to char
The static String.fromCharCode() method returns a string created from the specified sequence of UTF-16 code units.
console.log(String.fromCharCode(189, 43, 190, 61));
// expected output: "½+¾="
It accept a sequence of numbers that are UTF-16 code units. The range is between 0 and 65535 (0xFFFF). Numbers greater than 0xFFFF are truncated. No validity checks are performed.
Char to Unicode
The charCodeAt() method returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.
const sentence = 'The quick brown fox jumps over the lazy dog.';
const index = 4;
console.log(`The character code ${sentence.charCodeAt(index)} is equal to ${sentence.charAt(index)}`);
// expected output: "The character code 113 is equal to q"
string ↔ number
String to number
// string to integer
console.log(Number.parseInt('')); // NaN
console.log(Number.parseInt('15')); // 15
console.log(Number.parseInt('015')); // 15
console.log(Number.parseInt(' 15')); // 15
console.log(Number.parseInt('10', 2)); // 2
console.log(Number.parseInt('100', 2)); // 4
console.log(Number.parseInt('15', 2)); // 1
console.log(Number.parseInt('15', 8)); // 13
console.log(Number.parseInt(' 0xF', 16)); // 15
// Use Number.isNaN() to check whether the returned value is NaN.
let n1 = Number.parseInt('a');
console.log(Number.isNaN(n1)); // true
// string to float
console.log(Number.parseFloat('3.14abc')); // 3.14
console.log(Number.parseFloat('abc3.14')); // NaN
Number.parseInt vs parseInt
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat; // true
Number to string
The toString() method returns a string representing the specified Number object.
let count = 10
console.log(count.toString()) // '10'
console.log((17).toString()) // '17'
console.log((17.2).toString()) // '17.2'
let x = 6
console.log(x.toString(2)) // '110'
console.log((254).toString(16)) // 'fe'
console.log((-10).toString(2)) // '-1010'
console.log((-0xff).toString(2)) // '-11111111'
Reference
