Concatenating strings

JavaScript:
Concatenating strings

How to:

In JavaScript, you’ve got a few ways to concat strings. Old school: +. Modern: template literals. Here’s how they look.

Using the + operator:

let hello = "Hello, ";
let world = "world!";
let greeting = hello + world; 
console.log(greeting); // "Hello, world!"

Using template literals:

let user = "Jane";
let welcomeMessage = `Hi, ${user}! Welcome back.`;
console.log(welcomeMessage); // "Hi, Jane! Welcome back."

Deep Dive

Back in the day, + was the way to go, but it got messy with lots of variables. Enter ES6 in 2015, introducing template literals (those backticks ```). This meant cleaner-looking strings and the ability to toss in variables and expressions right inside your string without breaking a sweat.

Why + can be a pain:

Harder to read with multiple variables.
Easy to miss spaces, leading to squished words.
Plus, who needs all those pluses?

Why template literals rock:

Readability: Like an English sentence with blanks filled in.
Multiline support: You can create strings that span multiple lines without + or \n.
Expression interpolation: Pop in variables, do math, all in one go.

Here’s multiline and expressions in action:

let apples = 3;
let oranges = 5;
let fruitSummary = `You have ${apples + oranges} pieces of fruit: 
${apples} apples and 
${oranges} oranges.`;
console.log(fruitSummary);

Outputs a neatly formatted summary without any + acrobatics.

Technically, string concatenation creates a new string every time you use +. For the computer, that’s like making a whole new candy bar each time you just want to add a peanut. Not very efficient. Template literals are like having a mold where you can plunk all the ingredients in at once – better performance, especially with big strings or in loops.

JavaScript:Concatenating strings

How to:

Deep Dive

See Also

JavaScript:
Concatenating strings