JavaScript Strings: Text, Methods and Template Literals

A JavaScript string stores text. Learn how to write strings, combine values, use template literals and apply common methods to search or clean text.

Quick answer: Write a string inside single or double quotes, or use a template literal for text with embedded values. Methods such as trim(), includes() and toLowerCase() help work with text. Strings are immutable, so methods return a new string instead of changing the original.

Create a string

Use matching single or double quotes around text. If the text contains the same quote mark, escape it with a backslash or choose the other quote style.

const siteName = "HTMLCSSCODING";
const note = 'The lesson says "welcome".';
const quoted = "It's a good day to learn.";

Use a backslash to write special characters such as a new line (\n) inside a string.

Combine text with template literals

Template literals use backticks and can place an expression inside ${...}. This is called interpolation. It is often easier to read than joining many pieces with the plus operator.

const name = "Sam";
const greeting = `Hello, ${name}!`;

console.log(greeting);

The expression inside the braces is evaluated when the template literal is created. Template literals can also span multiple lines.

Read a string's length and part of its text

The length property counts UTF-16 code units in a string. For many everyday examples it corresponds to the number of characters, but some emoji are made from more than one code unit. Use slice() to return part of a string.

const message = "Learn JavaScript";
console.log(message.length);
console.log(message.slice(0, 5)); // "Learn"

Search and normalize text

includes() checks whether a string contains some text. Convert both values to the same letter case first when you want a simple case-insensitive search.

const input = "  CSS Basics  ";
const cleaned = input.trim();
const hasCss = cleaned.toLowerCase().includes("css");

console.log(cleaned); // "CSS Basics"
console.log(hasCss);  // true

trim() removes whitespace at the beginning and end. It does not remove spaces between words.

Replace text and keep the original clear

Methods such as replace() return a new string. Assign the result if you want to keep using the changed version.

const title = "CSS for beginners";
const updatedTitle = title.replace("CSS", "JavaScript");

console.log(title);        // "CSS for beginners"
console.log(updatedTitle); // "JavaScript for beginners"

Common questions about JavaScript strings

Can I change one character in a string by index?

Strings are immutable, so assigning to a character index does not change the string. Build a new string with methods such as slice() or use a replacement method.

What is the difference between a string and a template literal?

Both represent text. A quoted string uses single or double quotes. A template literal uses backticks and supports expression interpolation and multiple lines.

Does trim() remove spaces inside text?

No. trim() removes whitespace at the start and end of a string. It leaves spaces between words in place.

Practice: clean a visitor's name

Start with a string that contains extra spaces and mixed letter case. Use trim() to remove the outside spaces, then use a template literal to make a short greeting. Log the result and check the string before and after cleaning.