In JavaScript, a string is a group of characters enclosed by either a pair of single or double quotation marks. 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 what string appears where and when.

Learn how to format your JavaScript strings using concatenation methods and template literals.

String Concatenation

JavaScript allows you to concatenate strings using several approaches. A useful approach is the concat() method. This method uses two or more strings. It uses a single calling 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 of concatenating a collection of strings is by using 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 equal sign. This method allows you to add a new string to the end of an existing one.

        const firstName = "John";
const lastName = "Doe";
 
let stringVal;
 
stringVal = firstName;
stringVal += " ";
stringVal += lastName;
 
console.log(stringVal);

    

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

Template Literals

Template literals are an ES6 feature that allows you to format JavaScript strings. A template literal uses a pair of backticks (`) to display strings. This method of string formatting allows you to display cleaner multiline 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 utilizes HTML to print a list of three items in the browser:

To achieve the same output without template literals (or before template literals), you would need to use quotation marks. However, you wouldn’t be able to extend the code over multiple lines as 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

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

        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 code above produces the following output in the console:

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

Formatting Elements on Your Webpage With JavaScript

Apart from its functional association with webpage development, JavaScript works with HTML to influence the design and layout of a webpage. It can manipulate the text that appears on a webpage, as is the case with template literals.

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