Strings

In JavaScript, the strings are used for storing and manipulating text. No separate type exists for a single character. The strings internal format is always UTF-16.

A string represents zero or more characters that are written inside quotes.

About Quotes¶

We can distinguish single quotes, double quotes, and backticks:

let single = 'single-quoted';
let double = "double-quoted"; 
let backticks = `backticks`;

Double and single quotes are the same. Anyway, backticks are different. You can use them for embedding any expression into the string by wrapping it in ${…} as follows:

let str = "Web"; 

console.log(`Welcome to ${str}`); // Welcome to Web

let str = "Web"; 
console.log(`Welcome to ${str}`); // Welcome to Web

One of the most crucial advantages of backticks is that they allow a string to span numerous lines like this:

let languagesList = `Languages:

 * Javascript

 * Php

 * Java

`;

console.log(languagesList); // a list of languages, multiple lines

But, note that single and double quotes will now work in this case. If you use them trying to apply multiple lines, an error will occur:

let guestList = "Guests: // Error: Unexpected token ILLEGAL 
* John ";

Single and double quotes appeared earlier than the backticks. Thus the backticks are more functional.

You can also specify a “template function” before the first backtick. The syntax will look like this:

func `string`

As a rule, the func function is called automatically. It receives both the string and embedded expressions processing them. Using this feature, you can quickly implement custom templating. Anyway, developers rarely use it in practice.

Special Characters¶

You can create multiline strings with double and single quotes with the help \n, like this:

let languagesList = "Languages:\n * Javascript\n * Php\n * Java";

console.log(languagesList); // a multiline list of languages

There exist other less common special characters.

Find some of them in the list below:

• \', \" these special characters are used for quotes
• \r - carriage return. This character is now used alone. A combination of two characters \r\n is used for representing a line break in Windows text files.
• \\ - backslash
• \t - tab
• \xXX - unicode character with a particular hexadecimal unicode XX
• \uXXXX - this is unicode symbol with the hex code XXXX in UTF-16 encoding. It must include exactly 4 digits.

Here are examples with unicodes:

console.log("\u00E9"); // é

console.log("\u{03BB}"); // λ

Take into account that all special characters begin with a backslash. It is also known as an “escape character.”

You can also use it in case you wish to put a quote into the string.

Here is an example:

console.log('This\'s the Website!'); // This’s the Website

Also, consider that backslash is mainly used for correcting reading of the string by JavaScript, after which it disappears. In the string memory, you can’t find any \ . But when you need to show an actual backslash within the string, you should double it like in this example:

console.log(`The backslash: \\`); // The backslash: \ 

let backslash = "aa ///\\"; //  This is correct

// var backslash = "aa ///\"; // This is not.

console.log(backslash);

The String Length¶

The length property is used for finding the length of a string:

console.log(`Web\n`.length); // 7

Take into account that \n is a special character. Hence the length should be 7.

Sometimes developers mistype this property by calling str.length() instead of just str.length. That will not work.

Accessing Characters¶

Square brackets[pos] are mainly used for getting a character at a position [pos]. You can do that by calling the str.charAt(pos) method, as well. The very first character should start from zero:

let str = `Welcome`; 

// the first character

console.log(str[0]); // W

console.log(str.charAt(0)); // W

// the last character

console.log(str[str.length - 1]); // e

Modern developers prefer to use the square brackets, while the charAt is rarely used

Strings are Changeless¶

It is not possible to change the strings in JavaScript. Look at this example to make sure that it won’t work:

let str = 'Welcome';

str[0] = 'w'; 

console.log(str[0]);

The common practice is creating a whole new string assigning it to str instead of the old one like this:

let str = 'Hi';

str = 'h' + str[1]; // replace the string

console.log(str); // hi

Case Changing¶

We can distinguish two methods of changing the case. Here they are:

console.log('Welcome to Web'.toUpperCase()); // WELCOME TO Web

console.log('Welcome to Web'.toLowerCase()); // Welcome to Web

In another scenario, if it a single character should be lowercase, use this method:

console.log('Welcome to W3Docs' [0].toLowerCase()); // 'w'

Looking for a Substring¶

Let’s discover the ways of searching for a substring inside a string.

str.indexOf¶

This is the first method that is used for searching for the substr in str. It starts from the particular position pos and returns that position at the time the match is found, or -1, in case nothing is found.

Let’s check out the following example:

let str = 'Welcome to Web'; 

console.log(str.indexOf('Welcome')); // 0, because 'Welcome' is found at the beginning

console.log(str.indexOf('welcome')); // -1, not found, the search is case-sensitive

console.log(str.indexOf("Web")); // 11, "Web" is found at the position 11

str.lastIndexOf(substr, position)¶

This method searches from the end of a string to the beginning. The occurrences will be listed in the reverse order.

Consider a slight difficulty with indexOf inside the if test. It can’t be put in if in this way:

let str = "Welcome to Web";

if (str.indexOf("Welcome")) {

  console.log("Thank you"); // doesn't work!

}

So, it is necessary to check for the -1, as follows:

let str = "Welcome to Web";

if (str.indexOf("Welcome") != -1) {

  console.log("Thank you"); // works now

}

Includes, startsWith, endsWith¶

The more contemporary method str.includes(substr, pos) is capable of returning true/false depending on whether there is substr in the str.

Act like in the example, if you need to test for the match not needing its position at the same time:

console.log("Welcome to Web".includes("Welcome")); // true

console.log("Hi".includes("Bye")); // false

The second argument of str.includes is position you start searching from. Here is an example:

console.log("Welcome".includes("come")); // true

console.log("Welcome".includes("come", 5)); // false, from position 5 there is no "come"

Getting a Substring¶

JavaScript includes three methods of getting a substring: substring, substr, and slice.

str.slice(start [, end])

This method is used for returning the part of the string from start to end.

For example:

let str = "welcome";

console.log(str.slice(0, 6)); // 'welcom', the substring from 0 to 6 (not including 6)

console.log(str.slice(0, 1)); // 'w', from 0 to 1, but not including 1, so only character at 0

If a second argument is absent, the slice will go until the end, like this:

let str = "welcome";

console.log(str.slice(3)); // 'come', from the 3-position till the end

For start/end you can also use negative values.

For instance:

let str = "welcome "; 

// start at the 5th position from the right, end at the 1st from the right

console.log(str.slice(-5, -1)); // 'come'

str.substring(start [, end])

This method is used for returning the part of the string between the start and the end.

It looks much like slice. The most notable difference is that in the framework of this method, the start can be greater than the end.

For example:

let str = "welcome";

// these are same for substring

console.log(str.substring(3, 6)); // "com"

console.log(str.substring(6, 3)); // "com"

// ...but not for slice:

console.log(str.slice(3, 6)); // "com" (the same)

console.log(str.slice(6, 3)); // "" (an empty string)

str.substr(start [, length])

This method returns the part of the string from the start, with a particular length. It differs from the previous methods. This method will help you specify the length instead of the ending position.

For instance:

let str = "welcome";

console.log(str.substr(3, 4)); // 'come', from the 3-position get 4 characters

The first argument might be negative for counting from the end:

let str = "welcome";

console.log(str.substr(-4, 2)); // 'co', from the 4th position get 2 characters

Comparison of the Strings¶

It is essential to know that strings should be compared character-by-character in alphabetical order.

It would be best if you also considered the following characteristics:

1. A lowercase is bigger than the uppercase, like this:

console.log('a' > 'Z'); // true

1. Letters containing diacritical marks are considered “out of order.”

For example:

console.log('Germany' > 'England'); // true

Now, let’s start reviewing the internal representation of strings in JavaScript.

In JavaScript, we encode all strings using UTF-16. It means that each of the characters has an appropriate numeric code.

str.codePointAt(pos)

It is used for returning the code for the character at position pos :

// different case letters have different codes

console.log("w".codePointAt(0)); // 119

console.log("W".codePointAt(0)); // 87

String.fromCodePoint(code)

Makes a character by the numeric code:

console.log(String.fromCodePoint(80)); // P

Unicode characters can also be added by their codes applying \u followed by the hex code.

For instance:

// 90 is 5a in hexadecimal system

console.log('\u005a'); // Z

Let’s have a look at the characters with codes 65..220 and make a string of them:

let str = ''; 

for (let i = 65; i <= 220; i++) {

  str += String.fromCodePoint(i);

}

console.log(str);

// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„

// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ

Here, you can notice that capital characters go first, then several special characters, and finally, Ö at the end of the output.

let str = "welcome "; 
// start at the 5th position from the right, end at the 1st from the rightconsole.log(str.slice(-5, -1)); // 'come'