Overview

Question

51

How to build/concatenate strings in JavaScript?

rated 0 times [ 55] [ 4] / answers: 1 / hits: 107094 / 9 Years ago, thu, august 6, 2015, 12:00:00

Does JavaScript support substitution/interpolation?

Overview

I'm working on a JS project, and as it's getting bigger, keeping strings in good shape is getting a lot harder. I'm wondering what's the easiest and most conventional way to construct or build strings in JavaScript.

My experience so far:

String concatenation starts looking ugly and becomes harder to maintain as the project becomes more complex.

The most important this at this point is succinctness and readability, think a bunch of moving parts, not just 2-3 variables.

It's also important that it's supported by major browsers as of today (i.e at least ES5 supported).

I'm aware of the JS concatenation shorthand:

var x = 'Hello';

var y = 'world';

console.log(x + ', ' + y);

And of the String.concat function.

I'm looking for something a bit neater.

Ruby and Swift do it in an interesting way.

Ruby

var x = 'Hello'

var y = 'world'

print "#{x}, #{y}"

Swift

var x = "Hello"

var y = "world"

println("(x), (y)")

I was thinking that there might be something like that in JavaScript maybe something similar to sprintf.js.

Question

Can this be done without any third party library? If not, what can I use?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 9 Years ago kennedi · Accepted Answer

With ES6, you can use

Template strings:

var username = 'craig';

console.log(`hello ${username}`);

ES5 and below:

use the + operator

var username = 'craig';

var joined = 'hello ' + username;

String's concat(..)

var username = 'craig';

var joined = 'hello '.concat(username);

Alternatively, use Array methods:

join(..):

var username = 'craig';

var joined = ['hello', username].join(' ');

Or even fancier, reduce(..) combined with any of the above:

var a = ['hello', 'world', 'and', 'the', 'milky', 'way'];

var b = a.reduce(function(pre, next) {

  return pre + ' ' + next;

});

console.log(b); // hello world and the milky way