01 - String Type

A string is a sequence of characters enclosed in single quotes (' '), double quotes (" "), or backticks (`). Strings are one of the most commonly used data types in JavaScript.

An empty string is a string of length 0. JavaScript does not have a special type that represents a single element of a string.

String Literals

let str = "Hello";                
// Double quotes

let str1 = 'Single quotes are ok'; 
// Single quotes

Template Literals

Template literals are enclosed in backticks (`) and can include JavaScript expressions inside ${}. The value of the expression is evaluated, converted to a string, and combined with the surrounding characters.

let name = "Bill";
let greeting = `Hello ${name}.`; 
// "Hello Bill"
let a = 5, b = 10;
let result = `${a} + ${b} = ${a + b}`; 
// "5 + 10 = 15"
let phrase = `Backticks allow embedding expressions like ${str}`;

let combined = `${str} ${phrase}`;  
// String concatenation using template literals

alert(`1 + 2 = ${sum(1, 2)}.`);     
// Using template literals to embed function results
let name = "John";
console.log(`Hello, ${name}`); 
// Hello, John

console.log(`The result of 1 + 2 is ${1 + 2}`); // The result of 1 + 2 is 3
  • Multiline Strings: Template literals can span multiple lines without escape characters.
let multiline = `This is a string
that spans multiple lines.`;
let errorMessage = '\
\u2718 Test failure at ${filename}: ${linenumber}:
${exception.message}
Stack trace:
${exception.stack}
';

Tagged Template Literals

'\n'.length   // 1  (one character)

String.raw`\n`.length  // 2 (backslash and n)

Tagged template literals allow you to pass the template and its expressions to a function (called a “tag”). The function can process the expressions and return a value.

If a function name (or “tag”) comes right before the opening backtick, then the text and the values of the expressions within the template literal are passed to the function. The value of this “tagged template literal” is the return value of the function.

The built-in String.raw() tag returns the string inside backticks without processing backslash escapes.

Note : Even though the tag portion of a tagged template literal is a function, there are no parentheses used in its invocation. In this very specific case, the backtick characters replace the open and close parentheses.

The ability to define your own template tag functions is a powerful feature of Java‐Script. These functions do not need to return strings, and they can be used like constructors, as if defining a new literal syntax for the language.


Escaping Characters

Escaping characters allows you to treat characters as literal text when needed, such as for special characters like quotes, newlines, or backslashes.

  • Escape sequences:
    • \n: Newline character
    • \t: Tab character
    • \\: Backslash
    • \': Single quote
    • \": Double quote
    • \0: Null character
    • \b: Backspace
    • \v: Vertical tab
let message = "First line\nSecond line";
console.log(message);  
// First line (newline) Second line

const quote = "I\'ve got no right to take my place";  // Escape single quote

console.log(quote);  
// I've got no right to take my place

Concatenation

Concatenation is combining two or more strings into one. You can use the + operator to concatenate strings.

let first = "Hello";
let second = "World";
let combined = first + " " + second;  
// "Hello World"

let name = "con" + "cat" + "e" + "nate"

If any operand is a string, the other is converted to a string and concatenated.

alert('1' + 2);   // "12" (number 2 converted to string)
alert(2 + "1");   // "21" (number 2 converted to string)

JavaScript concatenates strings from left to right:

alert(2 + 1 + "1");    // "31" (2 + 1 = 3, then "3" + "1" = "31")
alert("2" + 1 + 1);    // "211" ("2" + 1 = "21", then "21" + 1 = "211")

All other math operators try to convert string to number and do the operation but not +

The String() function explicitly converts other data types to strings.

let number = 123;
let str = String(number);  // Converts the number to a string
console.log(str);          // "123"

Comparing Strings

Strings can be compared using the standard === equality and !== inequality operators. Two strings are equal if they consist of the exact same sequence of characters. Strings can also be compared using the <, <=, >, and >= operators.