@babel/plugin-transform-template-literals
info
This plugin is included in @babel/preset-env
Example
In
JavaScript
`foo${bar}`;
Out
JavaScript
"foo".concat(bar);
Installation
- npm
- Yarn
- pnpm
npm install --save-dev @babel/plugin-transform-template-literals
yarn add --dev @babel/plugin-transform-template-literals
pnpm add --save-dev @babel/plugin-transform-template-literals
Usage
With a configuration file (Recommended)
Without options:
babel.config.json
{
"plugins": ["@babel/plugin-transform-template-literals"]
}
With options:
babel.config.json
{
"plugins": [
[
"@babel/plugin-transform-template-literals",
{
"loose": true
}
]
]
}
Via CLI
Shell
babel --plugins @babel/plugin-transform-template-literals script.js
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-template-literals"],
});
Options
loose
boolean
, defaults to false
.
caution
Consider migrating to the top level mutableTemplateObject
assumption.
babel.config.json
{
"assumptions": {
"mutableTemplateObject": true
}
}
When mutableTemplateObject
is true
, tagged template literal objects aren't frozen. All template literal expressions and quasis are combined with the +
operator instead of with String.prototype.concat
.
When false
or not set, all template literal expressions and quasis are combined with String.prototype.concat
. It will handle cases with Symbol.toPrimitive
correctly and throw correctly if template literal expression is a Symbol()
. See babel/babel#5791.
In
JavaScript
`foo${bar}`;
Out
JavaScript
"foo" + bar;
tip
You can read more about configuring plugin options here