Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I do string interpolation in JavaScript?

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?

like image 418
Tom Lehman Avatar asked Sep 10 '09 23:09

Tom Lehman


People also ask

Can I use backticks JavaScript?

Backticks are an ES6 feature that allows you to create strings in JavaScript. Although backticks are mostly used for HTML or code embedding purposes, they also act similar to single and double quotes. Besides, using backticks makes it easier for string operations.

What does ${} do in JavaScript?

${} is a placeholder that is used in template literals. You can use any valid JavaScript expression such as variable, arithmetic operation, function call, and others inside ${}. The expression used inside ${} is executed at runtime, and its output is passed as a string to template literals.

Which strings do interpolate variables?

String interpolation is common in many programming languages which make heavy use of string representations of data, such as Apache Groovy, Julia, Kotlin, Perl, PHP, Python, Ruby, Scala, Swift, Tcl and most Unix shells.

How do you format a string in JavaScript?

JavaScript's String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values (UTF-16 code units). Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on.


2 Answers

Since ES6, you can use template literals:

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

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

like image 164
Damian Pavlica Avatar answered Sep 17 '22 15:09

Damian Pavlica


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.

like image 30
thefourtheye Avatar answered Sep 19 '22 15:09

thefourtheye