Ecmascript Template Literals Like 'Some ${String}' Are Not Working

ECMAScript template literals like 'some ${string}' are not working

JavaScript template literals require backticks, not straight quotation marks.

You need to use backticks (otherwise known as "grave accents" - which you'll find next to the 1 key if you're using a QWERTY keyboard) - rather than single quotes - to create a template literal.

Backticks are common in many programming languages but may be new to JavaScript developers.

Example:

categoryName="name";
categoryElements="element";
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${categoryElements} `) 

Output:

VM626:1 categoryName: name 
categoryElements: element

See:

Usage of the backtick character (`) in JavaScript

template strings not working

Single and double quotes wont invoke the behavior - use back ticks.

var name = 'Andrew';

console.log(`Hello ${name}`);

//          ^             ^

Why I can't do this: ${someValue} in JavaScript / Typescript?

Only works with backticks, not quotes.

Do `Hello ${a}` instead of 'Hello ${a}'

If Else Condition Not Working In Javascript Template Literals

You need to move the whole part into the expression part

`${ result[i].status == 1
    ? '...'
    : 'some other'
}`

Example with nested template strings.

console.log(`${true === false

    ? `${ 10 }`

    : `${ 20 }`

}`);

JavaScript user defined template literal formatting from object

If you don't mind using a well-known utility library, then Lodash has a pretty comprehensive template engine built into it.

https://lodash.com/docs/4.17.15#template

Taken from their documentation:

// Use the "interpolate" delimiter to create a compiled template.
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });

// => 'hello fred!'

// Use the ES template literal delimiter as an "interpolate" delimiter.
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });

// => 'hello pebbles!'

You can also specify your own custom delimiter:

// Use custom template delimiters.
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });

// => 'hello mustache!'

If bundle size is a concern you can opt to only install the template method from Lodash:
https://www.npmjs.com/package/lodash.template

Template String As Object Property Name

Why are template strings not allowed as literal object keys?

Template strings are expressions, not literals¹. You can only use string literals (and identifiers) for property names, for everything else - that is not known to be static - you need a computed property name.

Is it for performance reasons?

No, that's unlikely. It's to ease parsing, and makes it easy to distinguish constant (statically known) property names from dynamically computed ones.

And mostly, it's a feature that no one needs. It doesn't simplify or shorten anything, and what you would achieve with it is already possible.

Will the syntax be allowed sometime in the future?

Nope.

_{1: Even when they're called "template literals", technically they aren't literals. And: templates don't even need to be strings, they can evaluate to anything.}

---

Related Topics