Skip to main content

Strings

What are strings?​

In JavaScript, strings are sequences of characters used to represent text such as messages, names, and file paths. Strings are a primitive data type and are immutable. Once created, their contents cannot be changed, only replaced with a new string.

Minimal example:

const greeting = "Hello, World!";
const name = "Alice";
const message = "Welcome";

Key characteristics:

  • Strings are sequences of UTF-16 code units (Unicode text)
  • You can create them with single quotes, double quotes, or backticks (template literals)
  • Most operations (like slice, toUpperCase, replace) return new strings

Why this matters​

Strings are everywhere in JavaScript applications: UI labels, API responses, error messages, URLs, and configuration. A clear understanding of strings helps you:

  • Avoid bugs from incorrect escaping (quotes, backslashes, newlines)
  • Build readable messages instead of messy concatenations
  • Extract and transform text without off-by-one slice errors
  • Choose the right method for searching, replacing, and splitting text

Because JavaScript is so often used for web apps and JSON APIs, being fluent with strings is as important as understanding numbers or objects.

Basic syntax​

JavaScript supports three ways to write string literals:

const single = 'This is a string';
const double = "This is also a string";
const template = `This is a template literal`;

Single and double quotes behave the same way. Template literals (backticks) add interpolation and multi-line support.

If your string contains one type of quote, it’s often easiest to use the other:

const message = "It's a beautiful day";  // Use double quotes for apostrophe
const quote = 'He said "Hello"';         // Use single quotes for quotes

Simple example​

const firstName = "Alice";
const lastName = "Smith";

const fullName = firstName + " " + lastName;
// "Alice Smith"

Behavior​

Template literals let you embed expressions directly into a string:

const name = "Alice";
const age = 30;

// Old way (concatenation)
const message1 = "Hello, " + name + "! You are " + age + " years old.";

// Modern way (template literal)
const message2 = `Hello, ${name}! You are ${age} years old.`;
// "Hello, Alice! You are 30 years old."

You can use any JavaScript expression inside ${}:

const x = 5;
const y = 10;
const sum = `The sum of ${x} and ${y} is ${x + y}`; // "The sum of 5 and 10 is 15"

const isActive = true;
const status = `User is ${isActive ? "active" : "inactive"}`; // "User is active"

Using or Invoking the Concept​

Strings support indexing, length, concatenation, and methods for inspecting and transforming text.

Accessing characters and length:

const text = "Hello";

text.length;           // 5
text[0];               // "H" (first character)
text[text.length - 1]; // "o" (last character)
text.charAt(0);        // "H" (older style)

Using template literals for multi-line strings:

// Old way (concatenation + \n)
const oldWay = "Line 1\n" +
               "Line 2\n" +
               "Line 3";

// Template literal (preferred)
const newWay = `Line 1
Line 2
Line 3`;

Common transformations:

const text = "Hello, World!";

text.toUpperCase();     // "HELLO, WORLD!"
text.toLowerCase();     // "hello, world!"
text.includes("World"); // true
text.startsWith("He");  // true
text.endsWith("!");     // true

5. Parameters, Inputs, or Variations​

Literal Forms​

  • Single quotes: 'hello'
  • Double quotes: "hello"
  • Template literals: `hello`

Template literals add:

  1. Expression interpolation — ${expression}
  2. Multi-line strings — line breaks are preserved

Escape Sequences​

You can escape special characters in strings using backslashes:

const quote1 = 'He said "Hello"';           // Different quotes
const quote2 = "He said \"Hello\"";         // Escaped quote
const path = "C:\\Users\\Alice\\file.txt";  // Escaped backslashes
const newline = "Line 1\nLine 2";           // Newline
const tab = "Column1\tColumn2";            // Tab

In template literals, you still need to escape backticks and some sequences:

const text = `He said "Hello"`;         // Quotes work fine
const text2 = `Use \`backticks\` here`; // Escape backticks

Template Literal Interpolation​

Any valid expression can go inside ${}:

const items = ["apple", "banana"];
const message = `You have ${items.length} items: ${items.join(", ")}`;
// "You have 2 items: apple, banana"

6. Default Behavior (If Applicable)​

Immutability​

Strings are immutable. Methods return new strings instead of changing the original:

const text = "Hello";

text.toUpperCase();  // "HELLO" (but text is unchanged)
console.log(text);   // "Hello"

const upperText = text.toUpperCase();
console.log(upperText); // "HELLO"

Methods like replace, slice, trim, and toLowerCase all follow this rule.

Truthiness​

In boolean contexts, an empty string is falsy and any non-empty string is truthy:

if ("") {
  // never runs
}

if ("hello") {
  // runs, because non-empty string is truthy
}

This is often used for simple "is empty" checks.

7. Rules and Constraints​

  1. String indices start at 0 and go up to length - 1.
  2. slice(start, end) returns characters from start up to, but not including, end.
  3. Strings are immutable—assignment to text[0] does nothing (or throws in strict mode).
  4. Template literals preserve line breaks and whitespace exactly as written.
  5. includes, indexOf, startsWith, and endsWith are case-sensitive.

Correct slicing:

const text = "Hello, World!";

text.slice(0, 5);  // "Hello"
text.slice(7);     // "World!"
text.slice(-6);    // "World!"

8. Documentation or Introspection (If Applicable)​

Useful ways to inspect strings:

typeof "hello";        // "string"
const text = "hello";
text.length;           // 5
Object.keys(text);     // [] (primitive, not a plain object)

You can also inspect methods on String.prototype in the console, but in day-to-day coding you’ll mostly use the commonly known methods like slice, toUpperCase, includes, trim, split, and join.

9. Common Patterns​

Checking if a String Is Empty​

const text = "";

// Using truthiness
if (!text) {
  console.log("String is empty");
}

// Explicit length check
if (text.length === 0) {
  console.log("String is empty");
}

Building Strings with Loops vs join​

const names = ["Alice", "Bob", "Charlie"];
let result = "";

for (const name of names) {
  result += name + ", ";
}

console.log(result); // "Alice, Bob, Charlie, "

Using join is cleaner and more efficient:

const names = ["Alice", "Bob", "Charlie"];
const result = names.join(", ");
console.log(result); // "Alice, Bob, Charlie"

Searching and Extracting​

const text = "Hello, World!";

text.indexOf("World");    // 7
text.indexOf("xyz");      // -1
text.includes("World");   // true

text.slice(0, 5);         // "Hello"
text.slice(7);            // "World!"
text.slice(-6);           // "World!"
text.substring(0, 5);     // "Hello"

Replacing Text​

const text = "Hello, World!";

text.replace("World", "JavaScript");  // "Hello, JavaScript!"
text.replace("l", "L");               // "HeLlo, World!" (first occurrence only)
text.replaceAll("l", "L");            // "HeLLo, WorLd!" (all occurrences)

Splitting and Trimming​

const text = "apple,banana,cherry";
text.split(",");  // ["apple", "banana", "cherry"]

const words = "Hello World";
words.split(" ");  // ["Hello", "World"]
words.split("");   // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

const padded = "  Hello, World!  ";
padded.trim();      // "Hello, World!"
padded.trimStart(); // "Hello, World!  "
padded.trimEnd();   // "  Hello, World!"

Escaping Characters​

const quote = 'He said "Hello"';           // Using different quotes
const quote2 = "He said \"Hello\"";        // Escaping with backslash
const path = "C:\\Users\\Alice\\file.txt"; // Escaping backslashes
const newline = "Line 1\nLine 2";          // Newline character
const tab = "Column1\tColumn2";            // Tab character

const text = `He said "Hello"`;            // Quotes work fine in template literal
const text2 = `Use \`backticks\` here`;    // Escape backticks

10. Best Practices​

  • Prefer template literals for strings that include variables or span multiple lines.
  • Be consistent with quote style (single vs double) across a project; use linters/formatters to enforce it.
  • Avoid manual concatenation in complex strings—template literals are more readable.
  • Remember immutability: always use the returned value from methods like replace and toUpperCase.
  • Use includes, startsWith, and endsWith instead of indexOf when you only care about presence.
  • Normalize case (e.g. toLowerCase()) before case-insensitive comparisons.

11. Summary​

JavaScript strings are immutable sequences of characters used for all textual data in your programs. You create them with quotes or template literals, access characters by index, and use a rich set of methods to search, slice, transform, and format text. By understanding literals, interpolation, common methods, and a few best practices, you can handle strings in JavaScript clearly and reliably.