JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeTopicsjavascriptStrings
PrevNext
javascript
beginner
14 min read

Strings

es6
fundamentals
interpolation
methods
strings
tagged-templates
template-literals

JavaScript strings are immutable primitives with a rich set of built-in methods. Template literals (backticks) enable interpolation, multi-line strings, and tagged templates for custom processing.

Key Points

1Common Methods

includes(), slice(), replace(), replaceAll(), split(), trim(), padStart() — all return new strings (immutable)

2Immutability

Strings cannot be modified in place; every method returns a new string; compared by value unlike objects

3Template Literals

Backtick strings with ${expression} interpolation, multi-line support, and any embedded expression

4Tagged Templates

Pass template literals to functions for custom processing — used in styled-components, i18n, HTML escaping

5String.raw

Built-in tag that returns raw string without processing escape sequences — String.raw`\n` gives literal backslash-n

What You'll Learn

  • Know the most commonly used string methods in JavaScript
  • Understand template literals and how they improve string handling
  • Know what tagged templates are and their real-world use cases

Deep Dive

Strings are one of JavaScript's most commonly used types. They are immutable primitives — every string method returns a new string rather than modifying the original. ES6 introduced template literals as a major improvement over string concatenation.

Common String Methods

  • Searching: includes(str) returns boolean, indexOf(str) returns position (-1 if not found), startsWith(str) and endsWith(str) check prefixes/suffixes.
  • Extracting: slice(start, end) extracts a section (supports negative indices counting from the end), substring(start, end) is similar but doesn't support negatives.
  • Transforming: toUpperCase(), toLowerCase(), trim() (removes whitespace from both ends), trimStart(), trimEnd(), padStart(length, char), padEnd(length, char).
  • Replacing: replace(search, replacement) replaces the first match. replaceAll(search, replacement) (ES2021) replaces all matches. Both accept regex.
  • Splitting/Joining: split(separator) converts string to array. Array.join(separator) does the reverse.
  • Repeating: repeat(count) returns the string repeated n times.

Immutability

  • Strings cannot be modified in place. str[0] = 'X' has no effect. Every method returns a new string.
  • String comparison is by value: 'hello' === 'hello' is true, unlike objects.
  • Strings are iterable: you can use for...of and spread syntax: [...'hello'] → ['h','e','l','l','o'].

Template Literals

  • Enclosed in backticks (`) instead of quotes.
  • String interpolation: embed expressions with ${expression} — no need for concatenation.
  • Multi-line strings: backticks preserve line breaks without \n.
  • Can contain any expression: ${a + b}, ${condition ? 'yes' : 'no'}, ${fn()}.

Tagged Templates

  • A tagged template passes the template literal to a function for custom processing: tagFunction`Hello ${name}`.
  • The tag function receives an array of string parts and the interpolated values as separate arguments.
  • Use cases: HTML escaping to prevent XSS, CSS-in-JS (styled-components), internationalization (i18n), SQL query building.
  • The String.raw built-in tag returns the raw string without processing escape sequences: String.raw\n`` → the literal characters \n, not a newline.

Key Interview Distinction: String Immutability Strings look like they can be modified (str[0], str.length), but they are primitives and immutable. Every operation creates a new string. This is why repeated string concatenation in a loop is inefficient — each += creates a new string. Use Array.join() or template literals for building strings from many parts.

Fun Fact

Template literals were nearly left out of ES6 entirely. The TC39 committee debated for years whether backticks were the right delimiter — single and double quotes were taken, and backticks were controversial because they're hard to type on some keyboard layouts. Tagged templates were added late in the process and have enabled entirely new paradigms like GraphQL's gql`...` and Lit's html`...`.

Practice What You Learned

What are the most commonly used string methods in JavaScript?
junior
strings
Key string methods include: length, indexOf/includes for searching, slice/substring for extracting, toUpperCase/toLowerCase for case, trim for whitespace, split for converting to arrays, replace/replaceAll for substitution, and template literals for interpolation.
What are template literals and tagged templates in JavaScript?
junior
strings
Template literals use backticks (`) instead of quotes, supporting string interpolation with ${expression}, multi-line strings, and embedded expressions. Tagged templates allow you to parse template literals with a custom function for advanced string processing.
Previous
Event Loop & Runtime
Next
The this Keyword
PrevNext