JavaScript Strings

String Basics

Strings can be created using single quotes ('text'), double quotes ("text"), or backticks (`text`). Single and double quotes work identically—choose one style and use it consistently in your code. Backticks create template literals with additional features like string interpolation and multi-line support. Use the quote style that best fits your content and coding standards.

Strings are immutable in JavaScript, meaning once a string is created, its contents cannot be changed. You cannot modify individual characters or alter the string in place. Methods that appear to modify strings actually create and return new strings while leaving the original unchanged. This immutability ensures string values remain constant and predictable.

You can access individual characters in a string using bracket notation with a zero-based index: string[index]. The first character is at index 0, the second at index 1, and so on. Accessing an index beyond the string's length returns undefined. While you can read characters this way, you cannot change them because strings are immutable.

Every string has a length property that returns the number of characters in the string. Access it with string.length (no parentheses—it's a property, not a method). The length includes all characters: letters, digits, spaces, punctuation, and special characters. Length is useful for validation, looping through characters, or checking if a string is empty.

The backslash (\\) character is used for escape sequences to include special characters in strings. Common escape sequences include \n (newline), \t (tab), \' (single quote), \" (double quote), and \\\\ (backslash itself). Escape sequences allow you to include characters that would otherwise be impossible or problematic to type directly in a string literal.

// Creating strings
let single = 'Single quotes';
let double = "Double quotes";
let mixed = 'It\'s OK';

// String length
let text = "Hello World";
console.log(text.length); // 11

// Accessing characters
console.log(text[0]);     // "H"
console.log(text[6]);     // "W"

// Escape sequences
let quote = "He said, \"Hello\"";
let newline = "Line 1\nLine 2";
let tab = "Column1\tColumn2";

Template Literals

Template literals use backticks (`` `) instead of single or double quotes. They're a more powerful way to create strings, introduced in ES6 (2015). Template literals look different from regular strings and unlock special features like embedded expressions, multi-line strings without escape characters, and tagged templates for advanced string processing.

Template literals allow embedded expressions using ${expression} syntax. Any JavaScript expression inside ${} is evaluated, converted to a string, and inserted into the template. This is called string interpolation. Instead of concatenating with +, you embed variables and expressions directly: `Hello, ${name}!` is cleaner than 'Hello, ' + name + '!'. Expressions can be variables, calculations, function calls, or any valid JavaScript.

Unlike regular strings that require \n for line breaks, template literals can span multiple lines naturally. Just press Enter while typing the template literal and it preserves the line breaks. This makes template literals perfect for HTML templates, formatted text, or any multi-line content. The actual newlines become part of the string.

Template literals were introduced in ES6 (ECMAScript 2015) along with other modern JavaScript features like let, const, arrow functions, and classes. All modern browsers support template literals, but older browsers (like Internet Explorer) do not. If you need to support very old browsers, transpile your code with Babel or avoid template literals.

String interpolation with ${} makes combining strings with variables and expressions much easier and more readable than concatenation. Instead of keeping track of quote marks and + operators, you write one continuous template with placeholders. This reduces errors, improves readability, and makes code easier to maintain, especially for complex strings with multiple variables.

// Template literals
let name = "John";
let age = 30;

// String interpolation
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);

// Multi-line strings
let multiline = `
  This is line 1
  This is line 2
  This is line 3
`;

// Expressions in templates
let a = 5;
let b = 10;
console.log(`Sum: ${a + b}`); // "Sum: 15"