Strings and Template Literals | Hacking Into Coding

Strings represent text — names, messages, URLs, file paths, anything made of characters. You’ll build and reshape strings constantly, so JavaScript gives you a convenient way to assemble them and a large toolbox of methods for working with them.

Template literals — the modern way to build strings

A template literal is a string wrapped in backticks ( ` ) instead of quotes. Its superpower is interpolation: you can drop any expression directly into the text using ${ }, and JavaScript converts it to a string and inserts it for you.

const name = "Maria";
const age = 29;

const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Maria! You are 29 years old."

const summary = `Next year you'll be ${age + 1}.`;

Breaking down the syntax:

Backticks ( ` ) — open and close the template literal, just like quotes open and close a regular string.
${ } — an interpolation slot. Anything inside it is treated as a JavaScript expression, evaluated, converted to text, and spliced into the string at that exact spot.

Template literals also preserve line breaks, so they’re the easiest way to write multi-line text:

const message = `Dear ${name},
Thanks for signing up.
— The Team`;

The most common string methods

Strings come with built-in methods for inspecting and transforming them. Here are the ones you’ll reach for constantly, starting with the most common:

const text = "  Hello, World!  ";

text.length;            // 17 — number of characters
text.trim();            // "Hello, World!" — removes surrounding whitespace
text.toUpperCase();     // "  HELLO, WORLD!  "
text.toLowerCase();     // "  hello, world!  "
text.includes("World"); // true — does it contain this text?
text.replace("World", "There"); // "  Hello, There!  "

Slicing and splitting

These two are extremely common when you need part of a string, or need to break it apart:

const sentence = "The quick brown fox";

sentence.slice(4, 9);     // "quick" — characters from index 4 up to (not including) 9
sentence.slice(4);        // "quick brown fox" — from index 4 to the end

sentence.split(" ");      // ["The", "quick", "brown", "fox"]
sentence.split(" ").join("-"); // "The-quick-brown-fox"

slice takes a starting index and an optional ending index; split breaks a string into an array wherever it finds the given separator (here, a space).

Less common, but useful to recognize

"5".padStart(3, "0");       // "005"
"hello".at(-1);             // "o" — last character, without doing length - 1
String.raw`C:\new\folder`;  // "C:\new\folder" — ignores escape sequences

String.raw is a tagged template — a function placed right before a template literal that controls how it’s processed. You’re unlikely to write your own tagged templates as a beginner, but recognizing the syntax helps when you encounter libraries that use it.

The old way of doing things

Before template literals arrived in ES2015, the only way to combine strings and values was concatenation with the + operator (or the equivalent .concat() method):

var name = "Maria";
var age = 29;

var greeting = "Hello, " + name + "! You are " + age + " years old.";

This works, but it’s easy to lose track of spacing and punctuation among all the quotes and + signs, and multi-line strings required awkward "\n" escapes or string-array joins:

var message = "Dear " + name + ",\n" +
    "Thanks for signing up.\n" +
    "— The Team";

Template literals solve both problems at once — the text reads naturally, the interpolated values are easy to spot inside ${ }, and line breaks just work — which is why virtually all modern JavaScript builds strings with backticks instead of +.