syntax
`text ${expression} text`
example
const item = "coffee";
const price = 4.5;
console.log(`One ${item} costs $${price.toFixed(2)}.`);
const multiline = `Line one
Line two
Line three`;
console.log(multiline);
output
"One coffee costs $4.50."
"Line one\nLine two\nLine three"
Note Backtick strings support embedded expressions and multiline content without escape characters.
template literalstring interpolationbacktick stringmultiline stringembed expression in string
syntax
tagFunction`text ${expr} text`
example
function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
return result + str + (values[i] !== undefined ? `[${values[i]}]` : "");
}, "");
}
const user = "Kai";
console.log(highlight`Welcome, ${user}! You have ${3} alerts.`);
output
"Welcome, [Kai]! You have [3] alerts."
Note Tagged templates let you process template literal parts before producing the final string. Used in libraries like styled-components and GraphQL.
tagged templatetemplate tag functionprocess template literal
syntax
str.includes(search, startIndex)
str.startsWith(search)
str.endsWith(search)
example
const msg = "Order #1234 shipped";
console.log(msg.includes("shipped"));
console.log(msg.startsWith("Order"));
console.log(msg.endsWith("shipped"));
console.log(msg.indexOf("#"));
Note All search methods are case-sensitive. For case-insensitive checks, lowercase both sides first: str.toLowerCase().includes(term.toLowerCase()).
string containscheck if string includesstarts withends withfind in string
syntax
str.slice(start, end)
str.substring(start, end)
example
const path = "/users/profile/avatar.png";
console.log(path.slice(1));
console.log(path.slice(-10));
console.log(path.slice(7, 14));
Note slice() supports negative indices (counts from end). substring() does not. Prefer slice() -- it is more predictable.
substringslice stringextract part of stringget characters from string
syntax
str.replace(search, replacement)
str.replaceAll(search, replacement)
example
const template = "Hello {name}, welcome to {place}!";
const filled = template
.replace("{name}", "Ava")
.replace("{place}", "Berlin");
console.log(filled);
const csv = "a,b,c,d";
console.log(csv.replaceAll(",", " | "));
output
"Hello Ava, welcome to Berlin!"
"a | b | c | d"
Note replace() only swaps the first match unless you use a regex with the /g flag. replaceAll() replaces every occurrence.
replace stringstring replacereplace all occurrencesfind and replace
syntax
str.split(separator, limit)
arr.join(separator)
example
const tags = "js,react,node";
const tagArray = tags.split(",");
console.log(tagArray);
console.log(tagArray.join(" + "));
output
["js", "react", "node"]
"js + react + node"
Note split("") splits into individual characters. split() with no arguments returns the entire string in a single-element array.
split stringjoin array to stringstring to arrayseparate by delimiter
syntax
str.trim()
str.trimStart()
str.trimEnd()
example
const input = " hello@example.com ";
console.log(input.trim());
console.log(input.trimStart());
console.log(input.trimEnd());
Note Essential for cleaning user input. Only removes whitespace characters (spaces, tabs, newlines), not other invisible characters.
trim whitespaceremove spacestrim stringclean input
syntax
str.padStart(targetLength, padChar)
str.padEnd(targetLength, padChar)
example
const orderNum = "42";
console.log(orderNum.padStart(6, "0"));
const label = "Price";
console.log(label.padEnd(12, "."));
Note Useful for formatting IDs, aligning columns in console output, or zero-padding numbers.
pad stringpadStartpadEndzero padformat string length
syntax
str.toUpperCase()
str.toLowerCase()
str.toLocaleUpperCase(locale)
example
const status = "Pending";
console.log(status.toUpperCase());
console.log(status.toLowerCase());
console.log("istanbul".toLocaleUpperCase("tr"));
Note Always use locale-aware methods when dealing with internationalized text. The Turkish i is a classic bug source.
uppercaselowercaseconvert casecapitalize string
Repeat and Character Access
syntax
str.repeat(count)
str.at(index)
example
const border = "=".repeat(30);
console.log(border);
const word = "JavaScript";
console.log(word.at(0));
console.log(word.at(-1));
Note at() supports negative indices to count from the end. Bracket notation str[-1] returns undefined, not the last character.
repeat stringget last characterstring atcharacter at index