template-literals

How to call native es6 template string replacement from tag function?

You can (ab)use String.raw (the only built-in tag) for this purpose: function doNothingTag() { arguments[0] = { raw: arguments[0] }; return String.raw(…arguments); } // Or in a more modern style: const doNothingTag = (strings, …rest) => String.raw({ raw: strings }, …rest); doNothingTag`It ${true ? ‘works!’ : ‘fails’}` // “It works!” doNothingTag`Even\nwith\nescape\nsequences!` // “Even // with … Read more

How would you turn a JavaScript variable into a Template literal?

For the general situation, you can use a replacer function to replace every occurrence of ${someProp} with the someProp property on an object: const interpolate = (str, obj) => str.replace( /\${([^}]+)}/g, (_, prop) => obj[prop] ); const generatedText = “But I still need to use it as a template it to get ${variable}.”; const variable … Read more

Is it possible to generate string literal combinations with template literal in TypeScript?

You can make the compiler calculate such permutations, although since the number of permutations grows exponentially with the number of elements, you should be careful using it. Here’s how I’d proceed: type Permutations<T extends string, U extends string = T> = T extends any ? (T | `${T} ${Permutations<Exclude<U, T>>}`) : never; and then the … Read more

Unexpected comma using map()

Explanation template literals use the toString() method which by default joins the returned array by map with a ,. To avoid this “problem” you can use join(”) Code var description = [ ‘HTML & CSS’, ‘Javascript object-oriented programming’, ‘Progressive Web apps (PWAs)’, ‘Website Performance Optimization’, ‘Webpack and Gulp workflows’, ‘Fullstack React.js’, ‘Web Components’, ‘Responsive web … Read more

Template literals like ‘some ${string}’ or “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 … Read more

What is the purpose of template literals (backticks) following a function in ES6?

These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string. The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of … Read more

Template literals syntax is not working in IE11

If you look at the ECMAScript 6 compatibility table, you’ll see that template literals are not supported by IE11. The “use strict”; statement doesn’t really change anything, because before it is determined whether a code is in strict mode, it has to be parsed first, but it can’t be parsed, because you’re using syntax that the … Read more

What does this `…${…}…` code in the node docs mean? [duplicate]

This: `The area of a circle of radius 4 is ${circle.area(4)}` is an example of ES2015 template strings. It interpolates whatever circle.area(4) represents directly into the string. If you’re curious about this or other ES2015 features, I recommend checking out Babel and playing around in the REPL. Here’s a very simple example to get you … Read more