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=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </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=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </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=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </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>

Underscore.js _.tap() Function

SHUBHAMSINGH10

Improve

Article Tags :

Underscore.js _.template() Function

Syntax:

Parameters:

Return Value:

Similar Reads

Thank You!

What kind of Experience do you want to share?