Template literals are JavaScript string literals which allow embedded expressions. They allow for multi-line strings and string interpolation. In previous ECMAScript specifications, they were called "template strings".
Questions tagged [template-literals]
547 questions
246
votes
11 answers
Wrap long template literal line to multiline without creating a new line in the string
In es6 template literals, how can one wrap a long template literal to multiline without creating a new line in the string?
For example, if you do this:
const text = `a very long string that just continues
and continues and continues`
Then it will…
Ville Miekk-oja
- 18,749
- 32
- 70
- 106
212
votes
26 answers
Can ES6 template literals be substituted at runtime (or reused)?
tl;dr: Is it possible to make a reusable template literal?
I've been trying to use template literals but I guess I just don't get it and now I'm getting frustrated. I mean, I think I get it, but "it" shouldn't be how it works, or how it should get.…
Josh
- 6,944
- 8
- 41
- 64
147
votes
3 answers
Backticks (`…`) calling a function in JavaScript
I'm not sure how to explain this, but when I run
console.log`1`
In google chrome, I get output like
console.log`1`
VM12380:2 ["1", raw: Array[1]]
Why is the backtick calling the log function, and why is it making a index of raw:…
Sterling Archer
- 22,070
- 18
- 81
- 118
126
votes
4 answers
Unexpected comma using map()
I've an array with a list of elements and I'm trying to append this list to an HTML element using template strings:
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website…
Lc0rE
- 2,236
- 8
- 26
- 34
118
votes
3 answers
Template String As Object Property Name
Why does JavaScript not allow a template string as an object property key? For example, when I input:
foo = {`bar`: 'baz'}
into the NodeJS REPL, it throws a SyntaxError with "Unexpected template string" with a long stack trace. Property values are…
trysis
- 8,086
- 17
- 51
- 80
88
votes
8 answers
Template literals like 'some ${string}' or "some ${string}" are not working
I wanted to try using template literals and it’s not working: it’s displaying the literal variable names, instead of the values. I am using Chrome v50.0.2 (and jQuery).
Example
console.log('categoryName: ${this.categoryName}\ncategoryElements:…
Ron I
- 4,090
- 8
- 33
- 64
87
votes
7 answers
Multiline strings that don't break indentation
According to this esdiscuss discussion, it is possible in ECMAScript 6 to define multiline strings without having to place subsequent lines of the string at the very beginning of the line.
Allen Wirfs-Brock’s post contains a code example:
var a =…
Šime Vidas
- 182,163
- 62
- 281
- 385
66
votes
2 answers
Template literal inside of the RegEx
I tried to place a template literal inside of a RegEx, and it didn't work. I then made a variable regex which holds my RegEx, but it still not giving me the desired result.
However if I console.log(regex) individually, I do receive the desired…
vlad
- 965
- 2
- 9
- 16
59
votes
8 answers
Defer execution for ES6 Template Literals
I am playing with the new ES6 Template Literals feature and the first thing that came to my head was a String.format for JavaScript so I went about implementing a prototype:
String.prototype.format = function() {
var self = this;
…
CodingIntrigue
- 75,930
- 30
- 170
- 176
54
votes
3 answers
How to use es6 template literal as Angular Component Input
In my Angular 4 application, I have a component which takes a string input:
Francesco Borzi
- 56,083
- 47
- 179
- 252
42
votes
1 answer
"Unterminated template literal" syntax error when literal contains script tag
I'm using ES6 template literals to construct some HTML in strings, and so far it has been working fine. However, as soon as I try to put the literal text in my string the browser throws up and throws the syntax error:
SyntaxError:…
Michael
- 9,060
- 14
- 61
- 123
39
votes
5 answers
Is there a downside to using ES6 template literals syntax without a templated expression?
Is there a reason (performance or other) not to use backtick template literal syntax for all strings in a javascript source file? If so, what?
Should I prefer this:
var str1 = 'this is a string';
over this?
var str2 = `this is another string`;
Joshua Breeden
- 1,844
- 1
- 16
- 29
35
votes
2 answers
Template literals syntax is not working in IE11
The back-tick character is not recognized as a Valid Character in IE11 when using the "use strict" directive while it works in other browsers, such as Chrome.
What is the interpretation of this behavior taking into consideration that IE11 is still…
usefulBee
- 9,250
- 10
- 51
- 89
34
votes
1 answer
Is there a Python equivalent to template literals in JavaScript?
To provide a basic example, say I wanted to write:
name = str(input())
age = int(input())
print('Hi, {name}, you are {age}.')
In javascript, this would look like:
console.log(`Hi, ${name}, you are ${age}.`)
I assume there is no direct…
mikekoscinski
- 555
- 1
- 4
- 14
32
votes
2 answers
es6 multiline template strings with no new lines and allow indents
Been using es6 more and more for most work these days. One caveat is template strings.
I like to limit my line character count to 80. So if I need to concatenate a long string, it works fine because concatenation can be multiple lines like…
Geuis
- 41,122
- 56
- 157
- 219