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).
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:
| Escape | Meaning |
|---|---|
\\n | newline |
\\t | tab |
\\\\ | a literal backslash |
\\' | a literal ' |
\\" | a literal " |
| `\`` | a literal backtick |
Template literals: the modern default
Backtick strings — called template literals — let you do two things that ordinary strings cannot:
- Interpolate values directly with
${ ... }. - Span multiple lines with no escape characters.
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.
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:
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.
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.
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.
A multi-file string example
Let's split a small text-processing program across two files: one helper module, one driver.
Challenge
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("")→""
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!'''