无需登录 数据私有 本地保存

Handlebars 模板在线测试 - 输入数据和模板渲染

开发工具 模板引擎 Handlebars 模板 测试 渲染
12
0
0
0
Handlebars 模板测试
Handlebars 模板 .hbs
JSON 数据
JSON 有效

点击「渲染」或开启自动渲染查看结果


            

        

    


    
    

        
 常见问题与知识点

        

            

                

                    
                

                

                    

                        Handlebars 是一个强大的语义化模板引擎，基于 Mustache 模板语法扩展而来。它使用 {{变量名}} 双花括号语法进行数据插值，并支持 {{#if}}、{{#each}}、{{#with}} 等块级助手，让你可以用最少的逻辑代码生成 HTML。Handlebars 默认会对输出进行 HTML 转义，有效防止 XSS 攻击。
                    

                

            

            

                

                    
                

                

                    

                        双花括号 {{var}}：会对输出内容进行 HTML 转义，将 <、>、& 等字符转义为安全的 HTML 实体。适合输出普通文本。


                        三重花括号 {{{var}}}：不进行 HTML 转义，直接输出原始内容。适用于输出已经安全的 HTML 片段，但需要谨慎使用以避免 XSS 风险。
                    

                

            

            

                

                    
                

                

                    

                        遍历数组：
{{#each items}} <li>{{this}}</li> {{/each}}

                        在循环内可使用 {{@index}}（索引）、{{@key}}（键名）、{{@first}}（是否第一项）、{{@last}}（是否最后一项）等内置变量。


                        遍历对象：
{{#each obj}} {{@key}}: {{this}} {{/each}}
                    

                

            

            

                

                    
                

                

                    

                        Handlebars 的 {{#if condition}} 判断的是真值（truthy）：如果值为 false、undefined、null、""、0 或空数组 []，则条件为假，走 {{else}} 分支。


                        本工具还注册了增强 Helper：{{#eq a b}}（相等）、{{#gt a b}}（大于）、{{#lt a b}}（小于）、{{#and a b}}、{{#or a b}}、{{#not a}} 等，支持更复杂的逻辑判断。
                    

                

            

            

                

                    
                

                

                    

                        使用 Handlebars.registerHelper('名称', function(参数...) { return 结果; }) 注册。


                        例如注册一个转大写的 Helper：

                        Handlebars.registerHelper('upper', function(str) { return str.toUpperCase(); });


                        在模板中使用：{{upper name}}

                        本工具已预注册了 eq、gt、lt、upper、lower、json、length、add、subtract 等实用 Helper。
                    

                

            

            

                

                    
                

                

                    

                        {{#with object}} 用于切换上下文，在块内部可以直接访问该对象的属性而无需重复写前缀。


                        例如：

                        {{#with user}} {{name}} - {{email}} {{/with}}

                        等价于 {{user.name}} - {{user.email}}，但更简洁。配合 {{../}} 语法可以访问父级上下文。
                    

                

            

            

                

                    
                

                

                    

                        使用 {{! 这是注释 }} 语法添加模板注释，注释内容不会出现在输出结果中。


                        也可以使用 {{!-- 多行注释 --}}，支持跨行注释。这与 HTML 注释 <!-- --> 不同，HTML 注释会保留在输出中，而 Handlebars 注释会被完全移除。
                    

                

            

            

                

                    
                

                

                    

                        Handlebars 支持点号路径访问嵌套属性：{{user.address.city}}。

                        也支持斜杠路径（已废弃但仍可用）：{{user/address/city}}。

                        推荐使用点号路径，更直观且符合 JavaScript 习惯。当属性名包含特殊字符（如空格或点号）时，可以使用方括号：{{[special.key]}}。
                    

                

            

        

    









 🔧 相关工具