w3docs logo

JavaScript 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:

w3docs logo Strings in javascript
let str = "W3Docs"; console.log(`Welcome to ${str}`); // Welcome to W3Docs

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

w3docs logo Strings in javascript
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:

w3docs logo Strings in javascript
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:

w3docs logo Unicode strings in javascript
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:

w3docs logo Strings in javascript
console.log('This\'s the W3Docs site!'); // This’s the W3Docs site

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:

w3docs logo Strings in javascript
console.log(`The backslash: \\`); // The backslash: \ let backslash = "aa ///\\"; // This is correct // let backslash = "aa ///\"; // This is not. console.log(backslash);

The String Length

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

w3docs logo Strings length in javascript
console.log(`W3Docs\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:

w3docs logo Character at a position strings in javascript
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:

w3docs logo Change character at a position strings in javascript
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:

w3docs logo Character at a position strings in javascript
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:

w3docs logo toUpperCase change strings in javascript
console.log('Welcome to W3Docs'.toUpperCase()); // WELCOME TO W3DOCS console.log('Welcome to W3Docs'.toLowerCase()); // welcome to w3docs

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

w3docs logo toLowerCase change strings in javascript
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:

w3docs logo Index strings in javascript
let str = 'Welcome to W3Docs'; 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("W3Docs")); // 11, "W3Docs" 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:

w3docs logo Index strings in javascript
let str = "Welcome to W3Docs"; if (str.indexOf("Welcome")) { console.log("Thank you"); // doesn't work! }

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

w3docs logo Index strings in javascript
let str = "Welcome to W3Docs"; 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:

w3docs logo Includes strings in javascript
console.log("Welcome to W3Docs".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:

w3docs logo Includes strings in javascript
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:

w3docs logo The slice method in javascript strings
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:

w3docs logo Slice in javascript strings
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:

w3docs logo The slice in javascript strings
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:

w3docs logo The substring in javascript strings
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:

w3docs logo The substr in javascript strings
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:

w3docs logo The substr in javascript strings
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:
    w3docs logo Comparison in javascript strings
    console.log('a' > 'Z'); // true
  2. Letters containing diacritical marks are considered “out of order.”

For example:

w3docs logo Comparison in javascript strings
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 :

w3docs logo Return the code for the character at position javascript string
// 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:

w3docs logo Character's numeric code javascript string
console.log(String.fromCodePoint(80)); // P

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

For instance:

w3docs logo Unicode characters javascript string
// 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:

w3docs logo Unicode characters javascript string
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.


Do you find this helpful?