Dataslope logoDataslope

Strings and Text

Representing, building, slicing, and inspecting text — JavaScript's `string` type, in depth.

After numbers, the next universal kind of value is text. JavaScript's text type is called string. Strings are how a program holds names, messages, file contents, JSON, code, anything you can read.

Writing a string

A string is any sequence of characters between matching quote marks. JavaScript accepts three styles:

  • Single quotes: 'hello'
  • Double quotes: "hello"
  • Backticks (template literals): `hello`

Single and double quotes are interchangeable; pick one and stay consistent. Backticks are special — they enable interpolation and multi-line strings (more on that in a moment).

Code Block
JavaScript ES2023+

Escape sequences

If a string needs a character that would otherwise end the string (like a quote of the same kind), or special characters like a newline or a tab, you escape it with a backslash:

EscapeMeaning
\\nnewline
\\ttab
\\\\a literal backslash
\\'a literal '
\\"a literal "
`\``a literal backtick
Code Block
JavaScript ES2023+

Template literals: the modern default

Backtick strings — called template literals — let you do two things that ordinary strings cannot:

  1. Interpolate values directly with ${ ... }.
  2. Span multiple lines with no escape characters.
Code Block
JavaScript ES2023+

Template literals are the modern default for any non-trivial string. Use them.

Strings are immutable

A string, once created, cannot be modified in place. Every operation that "changes" a string actually produces a new one and leaves the original alone.

Code Block
JavaScript ES2023+

This is the same point we made about primitives in general: variables can be reassigned, but the values themselves are immutable. Reading and rereading this slowly until it clicks will save you grief later.

Length and indexing

A string has a .length property — the number of characters in it. You can read an individual character with bracket notation:

Code Block
JavaScript ES2023+

Indexes start at 0, not 1. The last character is at index length - 1. (Programmers and elevator designers disagree on where to start counting; programmers chose 0 long ago and won't change.)

The most useful string methods

JavaScript's string type comes with a long list of built-in methods. The ones below are the bread and butter — you will reach for these constantly.

Code Block
JavaScript ES2023+

Notice how none of those methods modified s. They all returned new strings. s is still its original value.

Converting between strings and numbers

You will move back and forth between numbers and strings often — reading user input (always a string), formatting a number for display, parsing a piece of text into a value to compute with.

Code Block
JavaScript ES2023+

Be deliberate about conversions. "5" + 3 is "53". "5" - 3 is 2. The arithmetic operators (except +) coerce strings to numbers. + does the opposite — if either side is a string, it concatenates. This is JavaScript's most infamous source of beginner confusion.

Counting characters: an important caveat

For all "normal" characters (English letters, digits, basic punctuation), string.length gives you the count of characters the way you'd expect. But:

  • Many emojis are more than one "code unit" long.
  • Letters with accents can be one character that's stored as one or two units depending on form.

This is rarely a problem for beginner programs. Just be aware: "😀".length is 2 in JavaScript, not 1, because the smiley emoji is encoded as a pair of code units. For accurate human-character counts in the presence of emoji, use Array.from(s).length or a Unicode-aware library.

Code Block
JavaScript ES2023+

A multi-file string example

Let's split a small text-processing program across two files: one helper module, one driver.

Code Block
JavaScript ES2023+

Challenge

Challenge
JavaScript ES2023+
Title case

Write a function titleCase(text) that capitalises the first letter of every word and lowercases the rest. Words are separated by single spaces.

Examples:

  • titleCase("hello world")"Hello World"
  • titleCase("javaScript is GREAT")"Javascript Is Great"
  • titleCase("")""

QuestionSelect one

Which string syntax should you reach for when you need to embed a variable inside a piece of text?

Single quotes with string concatenation: 'Hello, ' + name + '!'

Double quotes with string concatenation: "Hello, " + name + "!"

Backticks (template literals): `Hello, ${name}!`

Triple quotes: '''Hello, name!'''

On this page