@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

npm install --save-dev @babel/plugin-transform-template-literals

Yarn

yarn add --dev @babel/plugin-transform-template-literals

pnpm

pnpm add --save-dev @babel/plugin-transform-template-literals

Bun

bun add --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