834

Consider this code:

var age = 3;

console.log("I'm " + age + " years old!");

Are there any other ways to insert the value of a variable in to a string, apart from string concatenation?

1

18 Answers 18

977

Since ES6, you can use template literals:

const age = 3
console.log(`I'm ${age} years old!`)

P.S. Note the use of backticks: ``.

5
  • 20
    I'm wondering why they went with backticks on this, wouldn't "${age}" be enough to do interpolation? Commented Dec 19, 2018 at 8:22
  • 32
    @LaughingLemonade Backward compatibility. If it was implemented that way, all the existing code which prints a string in that format will fail. Commented Dec 21, 2018 at 7:02
  • 3
    @Jonathan I always dislike backticks as a meaningful character. But I am unsure if the reason is universal or only applies to my languages keyboard-layouts. Backtick is a special sort of character that waits with being written until the next character, requiring it to be hit twice to write (and writes two of them at this time). This is because some characters interact with them, such as "e". If I try to write "ello" with them, I get èllo``. It is also somewhat annoyingly located (shift+forwardtick, which is another such special lookahead character), as it requires shift to type, unlike '.
    – felix
    Commented Jun 14, 2019 at 8:20
  • 3
    @felix it's a think that's specific to your keyboard layout; what you're describing is called "dead keys". They're present in the Norwegian keyboard layout (where I am from) as well, which is part of the reason I switch to a US keyboard layout for all programming. (There's a number of other characters - e.g. [ and ] - that are much easier on a US keyboard as well.) Commented Mar 6, 2020 at 11:49
  • 2
    @felix Protip: I'm on a Norwegian keyboard which has that exact functionality you describe. You can hit space after hitting backtick to simply "make it appear" without putting it above a character or forcing two backticks. :) Commented Nov 9, 2022 at 12:51
268

tl;dr

Use ECMAScript 2015's Template String Literals, if applicable.

Explanation

There is no direct way to do it, as per ECMAScript 5 specifications, but ECMAScript 6 has template strings, which were also known as quasi-literals during the drafting of the spec. Use them like this:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

You can use any valid JavaScript expression inside the {}. For example:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

The other important thing is, you don't have to worry about multi-line strings anymore. You can write them simply as

> `foo
...     bar`
'foo\n    bar'

Note: I used io.js v2.4.0 to evaluate all the template strings shown above. You can also use the latest Chrome to test the above shown examples.

Note: ES6 Specifications are now finalized, but have yet to be implemented by all major browsers.
According to the Mozilla Developer Network pages, this will be implemented for basic support starting in the following versions: Firefox 34, Chrome 41, Internet Explorer 12. If you're an Opera, Safari, or Internet Explorer user and are curious about this now, this test bed can be used to play around until everyone gets support for this.

9
  • 4
    It's usable if you use babeljs, so you can introduce it in your codebase and then later drop the transpilation step once the browsers you need to support implements it.
    – ivarni
    Commented Oct 29, 2015 at 20:00
  • Is there a way to convert a standard string to a template string literal? For example, if one had a json file containing a translation table that needed values interpolated into them for display purposes? I think the first solution probably works well for this situation, but I do like the new string template syntax in general.
    – nbering
    Commented Mar 3, 2016 at 19:14
  • As this is still one of the first search results on js string interpolation, it would be great if you could update it to reflect the general availability now. "There is no direct way to do it" is probably not true anymore for the majority of browsers. Commented Mar 13, 2017 at 19:50
  • 2
    for the poor eyesight in the audience, the ` character is different than ' . If you have trouble getting this to work make sure your using the grave quote, (aka tilted quote , back quote) en.wikipedia.org/wiki/Grave_accent . It's at the top left on your keyboard :)
    – Quincy
    Commented Apr 13, 2017 at 10:38
  • @Quincy Bottom left of a Mac keyboard - also known as a back-tick :)
    – RB.
    Commented May 4, 2017 at 13:49
216

Douglas Crockford's Remedial JavaScript includes a String.prototype.supplant function. It is short, familiar, and easy to use:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

If you don't want to change String's prototype, you can always adapt it to be standalone, or place it into some other namespace, or whatever.

12
  • 109
    Note: This will run ten times slower than just concatenating.
    – cllpse
    Commented Sep 11, 2009 at 7:00
  • 37
    And take about three times more keystrokes & bytes.
    – ma11hew28
    Commented Jun 9, 2011 at 16:23
  • 9
    @roosteronacid - Can you give some perspective on that speed decrease? Like, from 0.01s to 0.1s (important) or from 0.000000001s to 0.00000001s (irrelevant)?
    – chris
    Commented Oct 2, 2012 at 16:52
  • 16
    @george: A quick test on my machine gave 7312 ns for "The cow says moo, moo, moo!" using Crockford's method vs 111 ns for a precompiled function that pulls the variables out of the passed object and concatenates them with the constant parts of the template string. This was Chrome 21.
    – George
    Commented Oct 25, 2012 at 21:13
  • 14
    Or use it like: "The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo']) Commented Feb 19, 2013 at 13:31
57

Word of caution: avoid any template system which does't allow you to escape its own delimiters. For example, There would be no way to output the following using the supplant() method mentioned here.

"I am 3 years old thanks to my {age} variable."

Simple interpolation may work for small self-contained scripts, but often comes with this design flaw that will limit any serious use. I honestly prefer DOM templates, such as:

<div> I am <span id="age"></span> years old!</div>

And use jQuery manipulation: $('#age').text(3)

Alternately, if you are simply just tired of string concatenation, there's always alternate syntax:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");
10
  • 4
    Side note: Array.join() is slower than direct (+ style) concatenation, because browser engines (which includes V8, which includes node and almost anything that runs JS today) have optimized it massively and there's a great deal of difference in favor of direct concatenation
    – pilau
    Commented Nov 19, 2013 at 15:17
  • 1
    The supplant method does allow you to generate the string you mention: the {token} is only replaced if the data object contains a member called token - thus provided that you do not provide a data object that has an age member, it will be fine. Commented Feb 1, 2014 at 15:18
  • 1
    Chris, I don't see how that's a solution. I could easily update the example to use both an age variable and the {age} string. Do you really want to be worrying about what you can name your variables based on the template copy text? --Also, since this post I've become a big fan of data binding libraries. Some, like RactiveJS, will save you from a DOM laden down with variable spans. And unlike Mustache, it only updates that part the page. Commented Oct 23, 2014 at 15:13
  • 3
    Your primary answer seems to assume that this javascript is running in a browser environment even though the question isn't tagged with HTML.
    – canon
    Commented Oct 29, 2015 at 19:46
  • 3
    Your "word of caution" regarding supplant is unwarranted: "I am 3 years old thanks to my {age} variable.".supplant({})); returns exactly the given string. If age were given, one could still print { and } using {{age}}
    – le_m
    Commented Jul 13, 2016 at 20:52
39

I use this pattern in a lot of languages when I don't know how to do it properly yet and just want to get an idea down quickly:

// JavaScript
let stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Inigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

While not particularily efficient, I find it readable. It always works, and its always available:

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

ALWAYS

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel Mother'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Son shoulder'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'made a gaping mortal-making wound upon.'

UPDATE:

I had thought it was self-evident, but it was made clear to me that it was not. You can apply this anytime you have a key/value pair to loop through.

// JavaScript
let template = 'Hello, my name is {name}. You {action} my {relation}.'
let values = {
  name: 'Inigo Montoya',
  action: 'killed',
  relation, 'father',
};
let output = template;
for(let entry of Object.entries(values)){
  output = output.replace('{'+output[0]+'}',output[1]);
}
console.log(output);

I've been using this in pl/SQL lately.

2
  • 2
    IE does not support template literals, so this is a nice solution when you do not want to require a separate package such as sprintf. Much cleaner than concatenating strings, especially when working html tags that have dynamic attributes and content. Commented Jun 22, 2020 at 18:04
  • 1
    IE should just die
    – refex
    Commented Mar 10, 2023 at 17:58
25

You could use Prototype's template system if you really feel like using a sledgehammer to crack a nut:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));
1
23

Try sprintf library (a complete open source JavaScript sprintf implementation). For example:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vsprintf takes an array of arguments and returns a formatted string.

0
17

The simplest would be

`my string ${VARIABLE}`

a less efficient way to accomplish this would be

function format(str, ...params) {
  for(const param of params)
    str = str.replace("%", param);
   return str;
}

which can be used with

format("My % string", "interpolation")
16

If you want to interpolate in console.log output, then just

console.log("Eruption 1: %s", eruption1);
                         ^^

Here, %s is what is called a "format specifier". console.log has this sort of interpolation support built-in.

0
13

You can do easily using ES6 template string and transpile to ES5 using any available transpilar like babel.

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

12
let age = 3;

console.log(`I'm ${age} years old!`);

You can use the backticks `` and ES6 template string

8

Here's a solution which requires you to provide an object with the values. If you don't provide an object as parameter, it will default to using global variables. But better stick to using the parameter, it's much cleaner.

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();
<div id="resultA"></div><div id="resultB"></div>

7
  • 4
    Don't use eval, eval is evil!
    – chris97ong
    Commented Jul 20, 2014 at 13:17
  • 6
    @chris97ong While that's "true", at least give a reason ("evil" doesn't help) or alternate solution. There's almost always a way around using eval, but sometimes not. For example, if the OP wanted a way to interpolate using the current scope, without having to pass a lookup object (like how Groovy interpolation works), I'm pretty sure eval would be required. Don't just resort to the old "eval is evil".
    – Ian
    Commented Jul 20, 2014 at 13:41
  • 1
    never use eval nor ever suggest it to be used
    – hasen
    Commented Jan 4, 2015 at 12:04
  • 4
    @hasenj this is why I said it "may not be the best idea" and provided an alternative method. But unfortunately, eval is the only way to access local variables in scope. So don't reject it just because it hurts your feelings. BTW, I also prefer the alternative way because it's safer, but the eval method is what precisely answers OP's question, hence it's in the answer. Commented Jan 4, 2015 at 13:14
  • 1
    The problem with eval is that is cannot access vars from another scope, so if your .interpolate call is within another function, and not global, it's not going to work.
    – georg
    Commented Jul 26, 2015 at 10:36
7

Try kiwi, a light-weight JavaScript module for string interpolation.

You can do

Kiwi.compose("I'm % years old!", [age]);

or

Kiwi.compose("I'm %{age} years old!", {"age" : age});
0
5

Couldn't find what I was looking for, then found it -

If you're using Node.js, there's a built-in utilpackage with a format function that works like this:

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

Coincidentally this is now built into console.log flavors too in Node.js -

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError
3

Expanding on Greg Kindel's second answer, you can write a function to eliminate some of the boilerplate:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Usage:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');
2

Since ES6, if you want to do string interpolation in object keys, you will get a SyntaxError: expected property name, got '${' if you do something like:

let age = 3
let obj = { `${age}`: 3 }

You should do the following instead:

let obj = { [`${age}`]: 3 }
2

While templates are probably best for the case you describe, if you have or want your data and/or arguments in iterable/array form, you can use String.raw.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

With the data as an array, one can use the spread operator:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);
1

Custom flexible interpolation:

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}
input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}
<input value="Everything between {{}} is {{processed}}" />
<div></div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.