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?
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.
${} 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.
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.
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.
Since ES6, you can use template literals:
const age = 3 console.log(`I'm ${age} years old!`)
P.S. Note the use of backticks: ``
.
Use ECMAScript 2015's Template String Literals, if applicable.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With