Lodash _.templateSettings

What you’ll learn
- How
_.templateSettingsconnects to _.template() at compile time. - The five properties—three RegExp delimiter patterns plus
importsandvariable. - Which tag type is HTML-safe for user data versus raw-output tags.
- How to bootstrap global settings once, then compile reusable render functions.
- Where to open each focused tutorial in the property index below.
Prerequisites
Read _.template() first so compile-once / render-many and the three ERB-style tag families make sense. Basic RegExp literacy helps when customizing delimiters.
- Template compile flow:
const render = _.template(source)thenrender(data). - Trusted sources: never compile template strings supplied by end users—settings do not make untrusted templates safe.
- obj prefix: default templates reference render data as
obj.fieldunless you change variable.
Key concepts
Lodash borrowed ERB’s three-tag model. Each maps to one templateSettings RegExp; two additional properties control scope and data naming.
interpolate
Value tags with HTML escaping—use for names, comments, and dynamic text.
evaluate
Logic tags for if/else and loops—runs JavaScript without auto-printing.
escape (pattern)
Raw-output tags for trusted HTML—despite the name, not an escape function.
imports + variable
Inject _ and helpers; rename the data parameter from default obj.
📝 Default ERB tag model
Out of the box, Lodash recognizes three delimiter families. Customize each via the matching templateSettings property.
| Tag role | Setting | Default delimiter | Prints output? | HTML escaped? |
|---|---|---|---|---|
| Logic / control flow | evaluate | open-percent (no equals) | No | N/A |
| Value insert (safe) | interpolate | open-percent-equals | Yes | Yes |
| Raw HTML insert | escape | open-percent-minus | Yes | No |
Bootstrap global settings
Configure once at application startup, then compile templates. This example switches interpolate to Mustache braces while leaving evaluate on ERB logic tags.
import template from "lodash/template";
// Optional global customization
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
_.templateSettings.imports._ = _;
const greet = template("Hello, {{ obj.name }}!");
console.log(greet({ name: "John" }));
// -> "Hello, John!" Per-template overrides
Pass an options object as the second argument to _.template() to override any setting without touching globals.
const render = _.template(
"Hi, {{ obj.name }}!",
{
interpolate: /{{([\s\S]+?)}}/g,
variable: "obj"
}
); Suggested learning path
Work through the property tutorials in this order—the same sequence used in the Lodash docs and this site’s navigation.
- Raw vs safe output:
escape— understand raw-output tags and XSS. - Logic blocks:
evaluate— if/else and loops. - Helpers:
imports— expose_and formatters. - Value syntax:
interpolate— Mustache braces and custom delimiters. - Data naming:
variable— renameobjtodataorviewModel.
Property index
Each row links to a focused tutorial. URLs follow /lodash/template-settings/{property}.
| Property | Type | What it controls |
|---|---|---|
_.templateSettings.escape | RegExp | Delimiter pattern for raw HTML output tags (open-percent-minus). Inserts values without calling _.escape—trusted markup only. |
_.templateSettings.evaluate | RegExp | Delimiter pattern for logic and control-flow tags (open-percent, no equals). Runs if/else, loops, and statements without printing by default. |
_.templateSettings.imports | Object | Map of helper names injected into compiled template scope—most commonly _ for Lodash plus custom formatters. |
_.templateSettings.interpolate | RegExp | Delimiter pattern for value-insertion tags (open-percent-equals). Output is HTML-escaped via _.escape—the safe default for user text. |
_.templateSettings.variable | String | Name of the data parameter in tag expressions. Default is obj, so templates reference obj.name unless you rename it. |
Pitfalls to avoid
escape is a RegExp
Do not assign a function to templateSettings.escape. HTML encoding is handled by interpolate tags and the _.escape() utility.
User data on raw tags
Never pipe comments or names through escape-pattern tags—use interpolate for escaped output.
Stale compiled functions
Changing global settings after _.template() does not update already-compiled render functions—recompile when delimiters change.
❓ Frequently Asked Questions
Summary
- Scope:
_.templateSettingsconfigures how _.template() parses and compiles delimiter tags. - Five properties: three RegExp delimiters plus
imports(object) andvariable(string). - Next step: open Lodash _.templateSettings.escape or pick any row from the property index.
Despite its name, templateSettings.escape is a RegExp for raw-output tags—not an escape function. Safe user text uses interpolate tags; the standalone _.escape() utility lives on the string category.
6 people found this page helpful
