Convert template literals to string concatenation

How to use the template literal converter

1. Paste your code into the JavaScript box.
2. Pick the Quotes for the new strings: Double “ or Single ’.
3. Copy the Converted code.
4. Check the stats: Templates converted and Tagged templates skipped.

What it does and when to use it

Template literals are easy to write but are not understood by ES5 engines. If a small script has to run in an old web view, a PDF form, or another host stuck on ES5, this tool removes them while keeping the exact same strings. It is also handy when a project’s style guide prefers concatenation in some files, or when you want to see exactly what a template evaluates to piece by piece.

For a fuller conversion that also handles arrow functions and let, use the ES6 to ES5 converter. To switch the quote style of existing strings afterwards, use the JS quote normalizer. The JavaScript validator will confirm the result still parses.

How it works

A lexer reads the code and finds each template literal, including templates nested inside ${…}. A template counts as tagged, and is skipped, when it follows a name, a closing bracket or another template, unless that name is a keyword such as return. For the rest:

• The text parts are decoded, so \n, é and a real line break become the same characters, then written as normal strings in your chosen quotes with any needed escapes.
• Each expression is converted too, in case it holds its own template.
• Simple expressions such as user.name or fn(x) are joined as they are. Anything else, such as count + 1 or a ternary, is wrapped in brackets, so + cannot change its meaning.
• Empty text parts are dropped.

Worked examples

Mixed text and expressions.

const greeting = `Hello, ${user.name}! You have ${count + 1} new messages.`;

becomes:

const greeting = "Hello, " + user.name + "! You have " + (count + 1) + " new messages.";

The brackets around count + 1 matter: without them a count of 4 would print “41”. The tagged tag`<b>${x}</b>` line in the same input is skipped and counted.

Starting with an expression. With Single quotes, `${base}/users/${id}?page=${page}` becomes base + '/users/' + id + '?page=' + page. No empty string is added, because the second piece is already text.

A nested template. The inner template is converted too:

const s = `total: ${a ? `${a} items` : 'none'}`;
// becomes
const s = 'total: ' + (a ? a + ' items' : 'none');

Limits and tips

• Multi-line templates turn into one long string with \n. Split it over several lines yourself if you prefer.
• Very long expressions inside ${…} are copied as they are, including any arrow functions; the result may still need the ES6 to ES5 converter.
• Objects with a custom valueOf can print differently: a template calls toString, while + tries valueOf first. Strings, numbers and dates give the same text either way.