Underscore.js _.template() Function
Last Updated :
16 Jan, 2024
Underscore.js _.template() function is used to compile JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions to create a template function that is compiled and can interpolate properties of data in interpolating delimiters, execute JavaScript in evaluating delimiters, and HTML-escape interpolated properties of data in escape delimiters. Moreover, data properties are retrieved in the template as free variables.
Syntax:
_.template(templateString, [settings]);
Parameters:
- templateString: It is a string that would be used as the template.
- settings: It is an object that must be a hash containing any _.templateSettings that should be overridden.
Return Value:
This method returns the compiled template function.
Example 1: This example shows the use of the _.template() function.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<script>
// Using the template() method with
// additional parameters
let compiled_temp = _.template(
"<% _.forEach(students, function(students) " +
"{ %><li><b><%- students %></b></li><% }); %>"
)({ students: ["Shubham", "Shakya"] });
// Displays the output
console.log(compiled_temp);
</script>
</body>
</html>
|
Output:
Hi Shubham!
Example 2: This example shows the use of the _.template() function by passing template literal and the object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<script>
// Using the _.template() method to
// create a compiled template using
// the internal print function in
// the "evaluate" delimiter
let comptempl = _.template("<% print('hey ' + geek); %>...");
// Assigning value to the evaluate delimiter
let result =
comptempl({ 'geek': 'Shubham' });
// Displays output
console.log(result);
</script>
</body>
</html>
|
Output:
hey Shubham...
Example 3: This example shows the use of the _.template() function and passing this function into the foreach loop.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<script>
// Using the template() method with
// additional parameters
let compiled_temp = _.template(
"<% _.forEach(students, function(students) " +
"{ %><li><b><%- students %></b></li><% }); %>"
)({ students: ["Shubham", "Shakya"] });
// Displays the output
console.log(compiled_temp);
</script>
</body>
</html>
|
Output:
<li><b>Shubham</b></li><li><b>Shakya</b></li>
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...