How to format a string in JavaScript?

In JavaScript, a string is a group of characters delimited by a pair of single or double quotes. There are many ways to format strings in JavaScript.


You can use specific methods or operators to combine strings. You can even perform specific operations to decide which channel appears where and when.

Learn how to format your JavaScript strings using concatenation methods and literal patterns.


String concatenation

JavaScript allows you to concatenate strings using several approaches. A useful approach is concat() method. This method uses two or more strings. It uses a single call string and takes one or more strings as arguments.

const firstName = "John";
const lastName = "Doe";

let stringVal;

stringVal = firstName.concat(" ", lastName);
console.log(stringVal);

Here, concat joins the string arguments (a blank space and lastName) to the calling string (firstName). The code then stores the resulting new string in a variable (stringVal) and prints the new value to the browser console:

Another way to concatenate a collection of strings is to use the plus operator. This method allows you to combine string variables and string literals to create new strings.

const firstName = "John";
const middleName = "Mike";
const lastName = "Doe";

let stringVal;

stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);

The code above prints the following output to the console:

A third approach to concatenating your JavaScript strings requires the use of a plus and equals sign. This method allows you to add a new string to the end of an existing string.

const firstName = "John";
const lastName = "Doe";

let stringVal;

stringVal = firstName;
stringVal += " ";
stringVal += lastName;

console.log(stringVal);

This code adds a blank space and the value of the lastName variable to the firstName variable, producing the following output:

Literal models

Pattern literals are an ES6 feature that lets you format JavaScript strings. A literal pattern uses a pair of backticks (`) to display strings. This method of string formatting allows you to display cleaner multi-line strings in JavaScript.

let html;

html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;

document.body.innerHTML = html;

The JavaScript code above uses HTML to print a list of three items to the browser:

To achieve the same result without template literals (or before template literals), you must use quotes. However, you won’t be able to span code across multiple lines like you can with template literals.

let html;

html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";

document.body.innerHTML = html;

String interpolation

Pattern literals let you use expressions in your JavaScript strings through a process called interpolation. With string interpolation, you can embed expressions or variables into your strings using the ${expression} placeholder. This is where the value of JavaScript template literals really becomes apparent.

let userName = "Jane Doe";
let age = 21;
let job = "Web Developer";
let experience = 3;

let html;

html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li>
</ul>`;

document.body.innerHTML = html;

The above code produces the following output in the console:

The first four arguments of ${expression} the placeholders are string variables, but the fifth is a conditional expression. The expression relies on the value of one of the variables (experiment) to dictate what it should display in the browser.

Formatting Elements on Your Web Page with JavaScript

Besides its functional association with web page development, JavaScript works with HTML to influence the design and layout of a web page. It can manipulate the text that appears on a web page, as is the case with literal patterns.

It can even convert HTML to images and display them on a webpage.

Comments are closed.