What's the best way to do string building/concatenation in JavaScript?

问题

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?

回答1:

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
  

回答2:

var descriptor = 'awesome';
console.log(`ES6 is ${descriptor}!`);

More: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en

回答3:

I think replace() deserves mentioning here.

During some conditions, the replace method can serve you well when building strings. Specifically, obviously, when your injecting a dynamic part into an otherwise static string. Example:

var s = 'I am {0} today!';
var result = s.replace('{0}', 'hungry');
// result: 'I am hungry today!'

The placeholder which to replace can obviously be anything. I use "{0}", "{1}" etc out of habit from C#. It just needs to be unique enough not to occur in the string other than where intended.

So, provided we can fiddle with the string parts a bit, OPs example could be solved like this too:

var x = 'Hello {0}';
var y = 'World';
var result = x.replace('{0}', y);
// result: 'Hello World'. -Oh the magic of computing!

Reference for "replace": https://www.w3schools.com/jsreF/jsref_replace.asp

回答4:

You could use the concat function.

var hello = "Hello ";
var world = "world!";
var res = hello.concat(world);

回答5:

You could use Coffeescript, it's made to make javascript code more concise.. For string concatenation, you could do something like this:

first_name = "Marty"
full_name = "#{first_name} McFly"
console.log full_name

Maybe you can start here to see what's offered by coffescript..

来源：https://stackoverflow.com/questions/31845895/whats-the-best-way-to-do-string-building-concatenation-in-javascript