Strings

String is an indexed set of zero or more characters, enclosed in single or double quotes.

const username = "Mango";

It is important to remember that the indexing of string elements starts at zero. For example, in the string "JavaScript" the letter "J" has a position index 0, and "t" has an index of 9.

The content of a string cannot be changed, only read. That is, you cannot remove a character and replace it after the string has been created, as the change would be permanent. You can only create a new string and assign it to a new variable.

String concatenation

If you apply the + operator to a string and any other data type, the result of this addition is a string. This operation is called concatenation, or string addition.

During concatenation, any data type is converted to a string and joined with a string, but you should mind the sequence of operands.

The sequence of operations matters; typecasting occurs only at the time of addition with a string, whereas up to this moment the usual rules of mathematics apply.

const message = "Mango " + "is" + " happy";
console.log(message); // Mango is happy

Let's look at different orders of operands.

console.log(1 + "2"); // "12"
console.log(1 + "2" + 4); // "124"
console.log(1 + 2 + "4"); // "34"

In the last example, you can see a mathematical addition operation for the first two numbers 1 and 2, after which the number 3 is converted to the string "3" and joined with the string "4".

Template strings

Template strings are an alternative to concatenation with more convenient syntax. Template strings are enclosed in backquotes instead of double or single quotes, and they may contain placeholders with the dollar sign and curly braces - ${expression}.

// Using variables, you need to make a string with substituted values
const guestName = "Mango";
const roomNumber = 207;
const greeting =
  "Welcome " + guestName + ", your room number is " + roomNumber + "!";
console.log(greeting); // "Welcome Mango, your room number is 207!"

It is very cumbersome to make strings with substituted values using concatenation. Template strings and interpolation come to the rescue.

const guestName = "Mango";
const roomNumber = 207;
const greeting = `Welcome ${guestName}, your room number is ${roomNumber}!`;
console.log(greeting); // "Welcome Mango, your room number is 207!"

String properties and methods

Each line has built-in properties and methods, let's look at some of them.

length property

In order to find out the length of a string, that is, the number of its characters, all strings have a built-in property, length. You can get its value by accessing it through a dot after the name of a variable or string literal.

const message = "Welcome to Bahamas!";
console.log(message.length); // 19
console.log("There is nothing impossible to him who will try".length); // 47

toLowerCase() and toUpperCase() methods

They return a new string in the appropriate case without modifying the original string.

const message = "Welcome to Bahamas!";
console.log(message.toLowerCase()); // "welcome to bahamas!"
console.log(message.toUpperCase()); // "WELCOME TO BAHAMAS!"
console.log(message); // "Welcome to Bahamas!"

There are situations where all characters in a string need to be converted to one case, upper or lower. For example, when searching for a keyword, if the user enters the string 'saMsUng', which must be compared with the string 'samsung' or 'SAMSUNG'.

console.log("saMsUng" === "samsung"); // false
console.log("saMsUng" === "SAMSUNG"); // false

In order not to require a 100% accurate input, you can "normalize" the string entered by the user, that is, convert all its characters to upper or lower case. The toLowerCase() and toUpperCase() string methods return a new string in the appropriate case, without changing the original one.

const BRAND_NAME = "SAMSUNG";
const userInput = "saMsUng";
const normalizedToUpperCaseInput = userInput.toUpperCase();

console.log(userInput); // 'saMsUng'
console.log(userInput === BRAND_NAME); // false
console.log(normalizedToUpperCaseInput); // 'SAMSUNG'
console.log(normalizedToUpperCaseInput === BRAND_NAME); // true

indexOf() method

It returns the position (index) of the first substring match, or -1 if nothing is found.

const message = "Welcome to Bahamas!";
console.log(message.indexOf("to")); // 8
console.log(message.indexOf("hello")); // -1

includes() method

It checks if a substring is included in the string, returns boolean true if included and false otherwise. The case of characters in a string and substring is important, since, for example, the letter "a" is not equal to the letter "А".

const productName = "Maintenance droid";

console.log(productName.includes("n")); // true
console.log(productName.includes("N")); // false
console.log(productName.includes("droid")); // true
console.log(productName.includes("Droid")); // false
console.log(productName.includes("Maintenance")); // true
console.log(productName.includes("maintenance")); // false

Note

All string methods are case sensitive.

endsWith() method

It helps determine if a string ends with the characters (substring) specified in parentheses, returning true or false.

const jsFileName = "script.js";
console.log(jsFileName.endsWith(".js")); // true

const cssFileName = "styles.css";
console.log(cssFileName.endsWith(".js")); // false

replace() and replaceAll() methods

They return a new string in which the first (replace) or all (replaceAll) substring matches have been replaced with the specified value.

const jsFileName = "script.js";
const minifiedJsFileName = jsFileName.replace(".js", ".min.js");
console.log(minifiedJsFileName); // "script.min.js"

const cssFileNames = "styles.css, about.css, portfolio.css";
const minifiedCssFileNames = cssFileNames.replaceAll(".css", ".min.css");
console.log(minifiedCssFileNames); // "styles.min.css, about.min.css, portfolio.min.css"