How To Work with Strings in JavaScript
Practical guide to JavaScript string methods: creating strings, concatenation, template literals, escaping quotes, newlines, and common built-in methods.
Drake Nguyen
Founder · System Architect
Introduction
Strings are one of the most frequently used primitive types in JavaScript. A string is a sequence of characters — letters, numbers, symbols, or whitespace — and JavaScript treats them as immutable values. This article focuses on javascript string methods and basic string handling so you can create, combine, and format text reliably in your code.
Creating and displaying strings
There are three common ways to write javascript strings: single quotes, double quotes, and backticks (template literals). All three create string values; the differences come from convenience and features like interpolation and multi-line support.
// Single-quoted string
const a = 'Hello';
// Double-quoted string
const b = "World";
// Template literal (backticks)
const c = `Hello World`;
// View output in the console
console.log(a, b, c);
Use console.log or other output methods (for example alert or writing into the DOM) to inspect string values while developing. For short tests, console.log is the most common.
Storing strings in variables
Variables let you name and reuse string values. You can declare strings with var, let, or const depending on mutability and scope. Remember that while you can reassign a variable declared with let or var, the string value itself is immutable.
const title = "javascript string methods";
let message = 'Learning strings in JavaScript';
console.log(title);
console.log(message);
String immutability explained
Strings are immutable in JavaScript: operations that appear to modify a string actually create a new string. For example, concatenation returns a new string rather than changing the original value.
Concatenation and template literals
Historically, string concatenation in JavaScript used the + operator. Template literals (backtick strings) introduced a cleaner way to embed variables and expressions using ${}.
// Concatenation using +
const first = 'Sea';
const second = 'horse';
console.log(first + ' ' + second); // Sea horse
// Template literal with variables
const poem = "The Wide Ocean";
const author = 'Pablo Neruda';
const favePoem = `My favorite poem is ${poem} by ${author}.`;
console.log(favePoem);
Template literals are especially useful for string concatenation, javascript template literals with variables, and creating readable multi-line strings without escape characters.
String literals vs string values
When you write a string in source code you are creating a string literal (including its quotes or backticks). When that value is printed or used at runtime you see the string value, which does not include the surrounding quotes. Understanding the distinction helps when reading errors and debugging output.
Handling quotes, apostrophes, and escape characters
Because quotes define string boundaries, embedding the same kind of quote inside a string requires either a different quote style, the escape character (backslash), or a template literal.
- Use the alternate quote style: "We're fine" or 'He said "Hi"'.
- Escape quotes: 'We\'re fine' or "He said \"Hi\"".
- Prefer template literals to avoid escaping in many cases: `We're fine and he said "Hi"`.
// Examples
const s1 = "We're safely using an apostrophe in double quotes.";
const s2 = 'Then he said, "Hello, World!"';
const s3 = 'I\'m escaped in single quotes';
const s4 = `We're safe in a backtick string and can include "quotes" effortlessly.`;
console.log(s1, s2, s3, s4);
Newlines and long strings
To include explicit newlines in a string value you can use escape sequences like \n (newline) or \r (carriage return). For multi-line source text, template literals are usually the cleanest option because they preserve line breaks as written.
// Using escape sequences
const lines = "Line one\nLine two\nLine three";
console.log(lines);
// Using a template literal for multi-line content
const poemBlock = `This is a string
that spans across
three lines.`;
console.log(poemBlock);
Note: Some older techniques, like escaping a line break with a backslash in a single-line quoted string, can be fragile and may cause issues with certain tools or minifiers.
Useful string methods in JavaScript
JavaScript provides many built-in string methods (string methods javascript) that make string manipulation javascript tasks straightforward. A few commonly used ones:
- length — get the number of characters: str.length
- indexOf / includes — search for substrings
- slice / substring / substr — extract parts of a string
- toLowerCase / toUpperCase — change case
- trim — remove surrounding whitespace
- replace / replaceAll — substitute text
- split — split a string into an array
// Examples
const text = " Hello, JavaScript strings! ";
console.log(text.length); // 25 (including spaces)
console.log(text.trim().toUpperCase()); // "HELLO, JAVASCRIPT STRINGS!"
console.log(text.includes('JavaScript')); // true
console.log(text.replace('JavaScript', 'JS'));
Common questions
- How to print a string in JavaScript? — Use console.log(string) or alert(string).
- Single quotes vs double quotes JavaScript — both work; follow your project style guide.
- How to escape quotes in JavaScript string — use backslash (\') or different quote delimiters, or template literals.
- Difference between string literal and string value JavaScript — literal includes delimiters in code; value is the runtime text.
Conclusion
Mastering javascript string methods and the basic ways to create and manipulate strings will make everyday tasks — from building messages to formatting data — easier. Prefer template literals for interpolation and multi-line text, use built-in string methods for manipulation, and remember that string immutability means most operations return new string values.
Tip: When working across a team, agree on a style (single, double, or backtick preference) and use linters to keep string usage consistent.