By the end of this tutorial, you’ll use Lodash’s _.template() confidently in real JavaScript projects.
_.template(source)
Insert data values
HTML-safe output
Render with { key }
options regex
Trusted sources only
_.template()?_.template() compiles a string with interpolate tags into a reusable function. Invoke it with a data object to generate emails, HTML snippets, or reports—similar in spirit to ERB or Mustache, but powered by JavaScript.
Treat template source like application code: store templates in your repo, compile at build or startup, and never pass raw user text into _.template().
_.template(string, [options])string — Template source with interpolate / escape / evaluate tags.options — Optional RegExp delimiters and variable name (imports, sourceURL).(data) => string.import template from "lodash/template";
// interpolate tags: open + %= name + close
const source = "Hello, " + "<" + "%= name %" + ">" + "!";
const render = template(source);
const output = render({ name: "John" });
// -> "Hello, John!"| Task | Code pattern | Result |
|---|---|---|
| Compile | _.template(source) | render function |
| Render | render({ name: 'A' }) | filled string |
| Escape HTML | use escape tags | Safe text output |
| Custom delim | options.interpolate | RegExp pattern |
| Reuse | const fn = _.template(t) | Compile once |
| Modern alt | template literals | ES6 backticks |
functionCallable renderer
3 kindsinterpolate, escape, evaluate
cautionNo user templates
reuseCompile once
string RequiredTemplate source containing delimiter tags.
_.template(tplSource)options Optionalinterpolate, escape, evaluate RegExps; variable, imports.
{ interpolate: /.../ }compiled fn RendererCall with data object; returns rendered string.
fn({ user: u })security CriticalDo not compile untrusted template strings.
// fixed templates onlyPractical _.template() patterns with sample output and interactive Try It Yourself labs.
Compile and render a simple greeting template.
Compile a template with a name placeholder and render it.
// interpolate tag: < + %= name + >
const templateString = "Hello, " + "<" + "%= name %" + ">" + "!";
const compiled = _.template(templateString);
const rendered = compiled({ name: "John" });
console.log(rendered);
// -> "Hello, John!"Compile once into a function; pass data object keys matching tag names.
Reuse compiled templates and stay safe.
Store the compiled function and call it for many users.
const tpl = "Hi, " + "<" + "%= name %" + ">" + "!";
const greet = _.template(tpl);
console.log(greet({ name: "Alice" }));
console.log(greet({ name: "Bob" }));Avoid recompiling inside loops; one compile, many renders.
Build a small HTML block from a user object.
const userTpl = _.template(
"<div class=\"profile\">" +
"<h2>" + "<" + "%= user.name %" + ">" + "</h2>" +
"<p>Email: " + "<" + "%= user.email %" + ">" + "</p>" +
"</div>"
);
const html = userTpl({
user: { name: "Alice", email: "alice@example.com" }
});For production HTML, prefer escape tags or framework templating with auto-escaping.
Personalize notification text with order data.
const emailTpl = _.template(
"Dear " + "<" + "%= recipient %" + ">,\n" +
"Order ID: " + "<" + "%= orderId %" + ">"
);
const body = emailTpl({ recipient: "Alice", orderId: "123456" });Use dollar-brace style delimiters via options.
const src = "Hello, ${ name }!";
const render = _.template(src, {
interpolate: /\$\{([\s\S]+?)\}/g
});
console.log(render({ name: "Jane" }));
// -> "Hello, Jane!"Security and modern alternatives.
Understand risks and when ES6 literals suffice.
// UNSAFE: never compile user-provided template source
// const bad = _.template(userInput);
// Safe: fixed template + data
const name = "World";
const safe = "Hello, " + name + "!";Use _.template for multi-line reusable templates; use template literals for simple one-offs.
| Topic | _.template() | ES6 literals | UI frameworks |
|---|---|---|---|
| Compile step | Yes | No | Component compile |
| Reuse | Compiled fn | Inline | Virtual DOM |
| User source | Dangerous | N/A | Sandboxed patterns |
| Best for | Email/HTML snippets | Simple strings | Interactive UI |
_.template() WorksScan template string for delimiter tags.
Build a function with data parameter.
Caller passes object with variable values.
Execute generated function; return final string.
_.template() is a practical Lodash string helper. Use the patterns above in your projects and explore the next method in the series.
Never compile untrusted user strings with _.template()—templates are compiled to functions. Use fixed template sources and pass sanitized data only.
Open the Try It editor and run the examples from this tutorial.
6 people found this page helpful