Stack Overflow
Stack Overflow

Questions tagged [template-strings]

Prefer using template-literals tag over template-strings that is the old name from previous ECMAScript specifications.

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".

146 questions
436
votes
11 answers

Usage of the backtick character (`) in JavaScript

In JavaScript, a backtick† seems to work the same as a single quote. For instance, I can use a backtick to define a string like this: var s = `abc`; Is there a way in which the behavior of the backtick actually differs from that of a single…
vancewang
  • 5,120
  • 3
  • 15
  • 14
223
votes
23 answers

Convert a string to a template string

Is it possible to create a template string as a usual string, let a = "b:${b}"; and then convert it into a template string, let b = 10; console.log(a.template()); // b:10 without eval, new Function and other means of dynamic code generation?
KOLANICH
  • 2,904
  • 2
  • 20
  • 20
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
120
votes
5 answers

ES6 template literals vs. concatenated strings

I have the following code for ECMAScript 6 template literals: let person = {name: 'John Smith'}; let tpl = `My name is ${person.name}.`; let MyVar = "My name is " + person.name + "."; console.log("template literal= " + tpl); console.log("my…
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
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
94
votes
8 answers

Template Strings ES6 prevent line breaks

I have a long string, which I build using ES6 template strings, but I want it to be without line breaks: var string = `As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than…
dim0_0n
  • 2,404
  • 5
  • 27
  • 46
53
votes
7 answers

Number formatting in template strings (Javascript - ES6)

I was wondering if it is possible to format numbers in Javascript template strings, for example something like: var n = 5.1234; console.log(`This is a number: $.2d{n}`); // -> 5.12 Or possibly var n = 5.1234; console.log(`This is a number:…
aquavitae
  • 17,414
  • 11
  • 63
  • 106
41
votes
5 answers

Is it possible to have a comment inside a es6 Template-String?

Let's say we have a multiline es6 Template-String to describe e.g. some URL params for a request: const fields = ` id, message, created_time, permalink_url, type `; Is there any way to have comments inside that backtick…
lukash
  • 668
  • 1
  • 5
  • 10
32
votes
7 answers

What are the actual uses of ES6 Raw String Access?

What are the actual uses of String.raw Raw String Access introduced in ECMAScript 6? // String.raw(callSite, ...substitutions) function quux (strings, ...values) { strings[0] === "foo\n" strings[1] === "bar" strings.raw[0] === "foo\\n" …
Venkat.R
  • 7,420
  • 5
  • 42
  • 63
31
votes
1 answer

How to nest template strings in ES6?

I got an prefer-template error from eslint. For the workaround, I changed my code to use a template string inside the require function which is nested inside the url function as following: { background:…
lvarayut
  • 13,963
  • 17
  • 63
  • 87
28
votes
1 answer

How can I construct a Template String from a regular string?

So I have this string: var name = "Chaim"; var templateStr = "Hello, my name is ${name}"; How can I convert it into a template-string so that the result would be equal to: var template = `Hello, my name is ${name}`; Is there a way to…
haim770
  • 48,394
  • 7
  • 105
  • 133
25
votes
1 answer

Why can functions be called without parentheses when using template strings?

I have a simple logging function: function log(str) { console.log('logged: ', str); } If I call it without parentheses (currently using Chrome's dev tools) and pass in a template string, like this: log`foo` The output is: logged: ["foo", raw:…
Sebastian Sandqvist
  • 1,829
  • 2
  • 16
  • 19
21
votes
4 answers

Why does IntelliJ keep removing backticks from this JavaScript template string?

I want to put "backticks" around my template strings. IntelliJ keeps removing them every time I try the wrap them around the string. Anyone's got a clue why its happening and how to solve this? I added a little code snippet of my .vue file where the…
Lucca
  • 1,447
  • 4
  • 16
  • 20
19
votes
7 answers

Javascript conditional in template string

Is there a way to do conditional within a template string? For example: let x, y; x = ... y = ... let templateString = `${x} ${y}`; I don't want the space in the template string after x to be output if y is undefined. How would I achieve that…
Boon
  • 40,656
  • 60
  • 209
  • 315
14
votes
6 answers

React conditional classnames using template strings and && operator

There have been many questions on StackOverflow relating to applying conditional classnames to React components; however, I have not seen a good answer for this particular situation: I have a basic div that I want to conditionally apply the…
Drew Jex
  • 845
  • 2
  • 13
  • 24
1
2 3
…
9 10