How to insert variables in JavaScript strings?

Question

What's the best way to do insert variables in a string in JavaScript? I'm guessing it's not this:

var coordinates = "x: " + x + ", y: " + y;

In Java, Strings are immutable and doing something like the above would unnecessarily create and throw away Strings. Ruby is similar and has a nice way of doing the above:

coordinates = "x: #{x}, y: #{y}"

Does something similar exist for JavaScript?

Strings are immutable in JavaScript as well. The plus (concatenation) operator makes a new string from pieces of an old one. — Joe Simmons
– Joe Simmons, Commented Sep 30, 2013 at 22:31
Are we strictly talking vanilla here? Anyway underscores' templates do a pretty good job at that — raam86
– raam86, Commented Sep 30, 2013 at 22:31
possible duplicate of JavaScript equivalent to printf/string.format — Naftali
– Naftali, Commented Sep 30, 2013 at 22:33

Quentin · Accepted Answer · 2018-03-13 09:56:35Z

66

Introduced in ES6 as "template strings"

MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const name = "Nick"
const greeting = `Hello ${name}`  // "Hello Nick"

edited Mar 13, 2018 at 9:56

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

answered Jun 12, 2017 at 23:49

Nick Brady

6,6323 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

at. Over a year ago

Template strings were part of ES6 and that standard came around, and was implemented by browsers, well after 2013 when I posted this question. Nevertheless, you're correct and I will award you the check :)

djangofan Over a year ago

Any particular reason here for using back-ticks? Will single quotes work?

Nick Brady Over a year ago

No, You need to use backticks. It is how echmascript (javascript) knows how to inject variables into ${} locations. A single tick would just signify a normal string and would be interpreted as such.

codebytom · Accepted Answer · 2017-07-19 16:19:38Z

4

https://www.npmjs.com/package/stringinject

https://github.com/tjcafferkey/stringinject

I created this function to do exactly this, it will allow you to pass in a string, and an object with keys that will replace placeholder values in the string with their values like below:

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Github

edited Jul 19, 2017 at 16:19

answered Jul 19, 2017 at 15:58

codebytom

4465 silver badges13 bronze badges

2 Comments

Danny Over a year ago

Pretty sure you accidentally transposed the variables. The way you have it written, I would expect it to set str to be "My username is Github on tjcafferkey"

codebytom Over a year ago

Great spot. Got them the wrong way round on my example.

Community · Accepted Answer · 2017-05-23 12:21:37Z

2

That's fine in JavaScript. There is no good built-in equivalent of an sprintf or String.format, however, you can build your own.

Don't worry about the "unnecessary" string objects. That's definitely micro-optimization. Address it if and when you need that extra tiny bit of performance or memory optimization, but in distributed software, you probably don't.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Sep 30, 2013 at 22:32

Nicole

33.3k11 gold badges78 silver badges102 bronze badges

1 Comment

zch Over a year ago

Plus, if it is really common performance problem I would expect JS implementations to have it optimized. I know Java compiler does such optimization.

Wyatt · Accepted Answer · 2013-09-30 22:38:59Z

1

If for some reason you are doing this many times per second and referencing the strings many times per call, you can always store the strings themselves as variables.

var preX = 'x: '
  , preY = 'y: '
  , coords
  ;
coords = preX + x + preY + y;

This of course should be supported by benchmarking/profiling, but creating many strings per frame is often a source of unnecessary garbage which can result in jank down the line.

answered Sep 30, 2013 at 22:38

Wyatt

2,51917 silver badges12 bronze badges

2 Comments

Platinum Azure Over a year ago

Is there really a JS interpreter that won't inline all of the raw strings? I feel like this might be slower on some browsers, since now the engines have to examine the preX (etc.) variables which could have changed, whereas it is impossible to change a string literal.

Wyatt Over a year ago

Agreed, I'd expect it to be slower. However, my case was specific to referring to the same string literal hundreds of times per frame (say in a visualization with many dynamically labeled points). The speed hit of optimized lookup (which will just be indexing into a given offset) will likely not outweigh string creation time for each literal. I imagine you are correct that the literals are optimized to some degree, but that varies browser by browser, making code that relies on that behavior implementation dependent.

Collectives™ on Stack Overflow

How to insert variables in JavaScript strings?

4 Answers 4

3 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related