Lodash _.templateSettings.interpolate

Beginner
⏱️ 8 min read
📚 Updated: Jul 2026
🎯 6 Examples + 3 Try It
Template configuration
Lodash _.templateSettings.interpolate tutorial — customize value insertion delimiters
Overview

What You’ll Learn

By the end of this tutorial, you’ll know how to configure Lodash’s interpolate RegExp so _.template() recognizes your preferred value-insertion syntax.

01

Default pattern

Understand the built-in <%= ... %> RegExp Lodash uses out of the box.

02

Mustache braces

Switch to {{ name }} delimiters for familiar Mustache-style templates.

03

RegExp anatomy

Learn why capture groups and the g flag matter for delimiter matching.

04

Three tag types

See how interpolate differs from escape and evaluate patterns.

05

Per-template override

Pass a custom interpolate RegExp in the second argument to _.template().

06

Compile timing

Set the pattern before compiling—already-built render functions stay unchanged.

Fundamentals

What Is _.templateSettings.interpolate?

_.templateSettings.interpolate is a global RegExp that _.template() uses to find tags where a JavaScript expression should be evaluated and its result inserted into the rendered string. The default pattern matches ERB-style <%= expression %> tags—the most common way to print a value like obj.name inside a Lodash template.

💡
Beginner tip

Think of interpolate as “the rule that tells Lodash where to drop in dynamic values.” Change the RegExp and your template source can use {{ title }} instead of <%= title %>.

Teams customize this setting when ERB delimiters clash with server-side markup, when designers expect Mustache-style braces, or when migrating templates from another engine that uses {{ }} syntax.

Foundation

📝 Syntax

Assign a RegExp to the global settings object (or pass it per compile):

javascript
_.templateSettings.interpolate = /PATTERN/g;

// Default Lodash value:
// /<%=([\s\S]+?)%>/g

Syntax Rules

  • Type — must be a RegExp, never a function.
  • Capture group — the first capturing group (...) holds the JavaScript expression Lodash evaluates.
  • Non-greedy match — use +? so nested or adjacent tags parse correctly.
  • Global flag — include g so every tag in the template string is found.
  • Compile time — Lodash reads the pattern when _.template() runs, not on each render.
javascript
import template from "lodash/template";

// Default — no change needed for <%= %> tags
const greet = template("Hello, <%= obj.name %>!");
console.log(greet({ name: "Ada" }));
// -> "Hello, Ada!"
Cheat Sheet

⚡ Quick Reference

Delimiter styleinterpolate RegExpTemplate example
ERB (default)/<%=([\s\S]+?)%>/g<%= obj.title %>
Mustache/{{([\s\S]+?)}}/g{{ name }}
Double braces + spaces/{{ ([\s\S]+?) }}/g{{ name }}
Custom tokens/\[\[([\s\S]+?)\]\]/g[[ user.email ]]
Per-template only_.template(str, { interpolate: /.../g })Overrides global for one compile
Logic blocks (separate)evaluate RegExp<% if (obj.ok) { %>
Default
/<%=...%>/g

ERB-style output tags

Type
RegExp

Not a function

Sibling
escape

<%- ... %> tags

Sibling
evaluate

<% ... %> logic

Reference

🧰 Property Details

How interpolate fits into _.templateSettings:

interpolate RegExp

Pattern that matches value-insertion tags. The first capture group becomes executable JavaScript whose return value is written to the output (HTML-escaped by default).

/<%=([\s\S]+?)%>/g
capture group 1 Expression

Content inside the delimiters—e.g. obj.name, price * qty, or _.upperCase(title) when imports expose _.

{{ obj.name }}
data reference Uses variable

Expressions typically reference the data parameter name from templateSettings.variable (default obj).

<%= obj.title %>
per-compile override Optional

Pass { interpolate: /.../g } as the second argument to _.template() to avoid mutating global settings.

_.template(str, { interpolate })

Lodash templates are not full Mustache: logic still uses evaluate tags unless you configure those separately. Only value insertion moves to {{ }} when you change interpolate.

Hands-On

Examples Gallery

Practical interpolate patterns with copy-ready code, sample output, and interactive Try It Yourself labs.

📚 Getting Started

Use the default ERB delimiter, then switch to Mustache-style braces.

Example 1 — Default <%= %> interpolation

Lodash ships with ERB-style tags. No configuration is required for standard output.

javascript
const render = _.template("User: <%= obj.username %>");

console.log(render({ username: "john_doe" }));
// -> "User: john_doe"

// Default pattern (already set):
// _.templateSettings.interpolate === /<%=([\s\S]+?)%>/g
Try It Yourself

How It Works

Lodash scans the template for <%= ... %>, evaluates the expression inside, and concatenates the result into the final string.

Example 2 — Mustache-style {{ }} delimiters

Assign a new RegExp so templates read like Handlebars or Mustache.

javascript
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

const render = _.template("Hello, {{ obj.name }}! You have {{ obj.count }} messages.");

console.log(render({ name: "Sarah", count: 3 }));
// -> "Hello, Sarah! You have 3 messages."
Try It Yourself

How It Works

The RegExp /{{([\s\S]+?)}}/g treats double braces as interpolation boundaries. Whitespace around the expression is fine—Lodash trims and evaluates obj.name as JavaScript.

📈 Practical Patterns

Mix delimiter types, override per template, and build email or notification strings.

Example 3 — Mustache interpolate + ERB evaluate

Keep logic in <% %> blocks while values use {{ }}—a common hybrid setup.

javascript
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
// evaluate stays default: /<%([\s\S]+?)%>/g

const tpl = _.template(
  "<% if (obj.premium) { %>Welcome, {{ obj.name }}! (Premium)<% } else { %>" +
  "Hello, {{ obj.name }}.<% } %>"
);

console.log(tpl({ name: "Alex", premium: true }));
// -> "Welcome, Alex! (Premium)"
Try It Yourself

How It Works

Only interpolate changed. evaluate still parses <% if ... %> blocks, so you get Mustache-like output syntax with full JavaScript control flow.

Example 4 — Per-template override (no global mutation)

Pass interpolate in the options object when two modules need different delimiter styles.

javascript
const mustacheTpl = _.template(
  "Order #{{ orderId }} — {{ status }}",
  { interpolate: /{{([\s\S]+?)}}/g }
);

const erbTpl = _.template("Invoice <%= obj.id %>");

console.log(mustacheTpl({ orderId: 9001, status: "shipped" }));
// -> "Order #9001 — shipped"

Example 5 — Custom [[ ]] tokens

Avoid collisions with CSS or framework syntax by inventing your own delimiter pair.

javascript
_.templateSettings.interpolate = /\[\[([\s\S]+?)\]\]/g;

const emailTpl = _.template(
  "Subject: [[ obj.subject ]]\n\nHi [[ obj.recipient ]],\n[[ obj.body ]]"
);

console.log(emailTpl({
  subject: "Reminder",
  recipient: "Team",
  body: "Standup at 10am."
}));

🚀 Beyond the Basics

Expressions, helpers, and how interpolate relates to escape tags.

Example 6 — Expressions and helpers inside tags

Interpolation tags accept any valid JavaScript expression, including Lodash helpers from imports.

javascript
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
_.templateSettings.imports._ = _;

const summaryTpl = _.template(
  "Total: {{ _.sum(obj.items) }} | Tags: {{ _.join(obj.tags, ', ') }}"
);

console.log(summaryTpl({
  items: [10, 20, 5],
  tags: ["urgent", "billing"]
}));
// -> "Total: 35 | Tags: urgent, billing"

When to prefer escape tags

For raw HTML from trusted sources, use escape tags (<%- %>) instead of interpolate when you need unescaped insertion—never do this with user input.

🧠 How interpolate Works

1

Read RegExp from settings

_.template() loads interpolate from global templateSettings or per-call options.

Config
2

Split template string

Lodash scans the source with interpolate, escape, and evaluate patterns to segment static text and dynamic blocks.

Parse
3

Compile to render function

Captured expressions become JavaScript that runs when you call the compiled function with data.

Compile
=

Values inserted on render

Each interpolate match evaluates its expression and appends the result to the output string.

Important

📝 Notes

  • interpolate must be a RegExp—assigning a function will break compilation.
  • Changes apply at compile time; re-run _.template() after editing the pattern.
  • Mustache {{ }} only replaces value tags—logic still needs evaluate unless you use a different engine.
  • Expressions inside tags are JavaScript, not Mustache path lookups with dot-less names.
  • Use the g flag and a non-greedy capture group for reliable multi-tag parsing.
  • For user-generated HTML, rely on default escaping—do not switch to raw output without a security review.
Wrap Up

Conclusion

_.templateSettings.interpolate controls which delimiter wraps dynamic values in Lodash templates. Start with the default <%= %> tags, then switch to {{ }} or custom tokens when your stack or designers expect different syntax.

Configure globally at startup or override per compile, pair with evaluate for logic blocks, and move on to variable when you want a clearer data parameter name.

Try Mustache delimiters Next: variable setting
Pro Tips

💡 Best Practices

✅ Do

  • Set interpolate once at application bootstrap before compiling templates
  • Document your delimiter choice in a shared style guide or README
  • Use per-template overrides when only one file needs different syntax
  • Keep evaluate and escape aligned with your interpolate style
  • Test compiled output after changing the RegExp—old render functions stay stale

❌ Don’t

  • Assign a function to templateSettings.interpolate
  • Assume Mustache {{ name }} works without setting the RegExp first
  • Mix <%= %> and {{ }} in the same project without documenting which is active
  • Omit the global g flag on your custom pattern
  • Compile templates from untrusted users—expressions run as JavaScript
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about interpolate

Use these points when customizing Lodash value-insertion tags.

5
Core concepts
💬 01

RegExp

Pattern, not a function.

Basics
{{ }} 02

Mustache

/{{([\s\S]+?)}}/g

Syntax
⚙️ 03

Compile time

Set before _.template().

Timing
🔄 04

Override

Per-call options object.

Scope
📝 05

variable

Name data in expressions.

Next step
🎯 You’re ready to customize interpolate delimiters
Review Quick Reference →

❓ Frequently Asked Questions

It is a RegExp that tells _.template() which tags insert evaluated JavaScript values into the output. The default pattern matches ERB-style open-percent-equals tags.
A RegExp. Lodash reads the pattern at compile time and splits the template string into static text and dynamic segments. Do not assign a callback function.
Set _.templateSettings.interpolate = /{{([\s\S]+?)}}/g before calling _.template(), then write templates like Hello, {{ obj.name }}! (using the default obj variable name).
interpolate tags output values with HTML escaping via _.escape by default in compiled output. escape tags (templateSettings.escape) use a separate RegExp for explicitly escaped insertion.
Only if your templates also contain logic blocks. Mustache-style projects often set interpolate to {{ }} but keep evaluate as ERB logic tags for conditionals and loops.
At compile time. Change templateSettings.interpolate before _.template() runs. Already-compiled functions are not updated automatically.
Did you know?

The default interpolate pattern /<%=([\s\S]+?)%>/g is the same family of delimiters Ruby on Rails popularized in ERB templates. Lodash adopted them so server and client templates could share familiar syntax.

Practice interpolate delimiters in the Live Editor

Switch to Mustache braces, run the examples, and compare output with the default ERB tags.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

Lodash _.templateSettings.imports Lodash _.templateSettings.variable