如何在使用 Javascript 在 div 中附加 html 时实现字符串插值

Posted 2023-02-22

【中文标题】如何在使用 Javascript 在 div 中附加 html 时实现字符串插值

【英文标题】：How to achieve string interpolation while appending html inside a div using Javascript

【发布时间】：2019-11-28 18:37:13

【问题描述】：

可能是一个愚蠢的问题，但就是这样。 我正在尝试根据从我的支持 Java 控制器接收到的数据在我的 div 中插入一些 html。一切正常，但我不知道如何将收到的数据中的字符串插入到我的 jsp 的段落标签中。

这里是代码

<script>
    $(document).ready(function() 
        var url = "$context/support/ajax";
        $.ajax(
            type : 'GET',
            url : url,
            dataType : 'json',
            success : function(data, status, xhr) 

                data.forEach(function(data) 
                    if (data.userType == 'O') 
                        $( ".chats" ).append(`
                                <div class='chat-avatar'>


                                <a class='avatar' data-toggle='tooltip' href='#'
                                    data-placement='right' title='' data-original-title=''> <img
                                    src='<c:url value = '/app-assets/images/portrait/small/avatar-s-1.png'/>'
                                    alt='avatar'>
                                </a>
                            </div>
                            <div class='chat-body'>
                                <div class='chat-content'>
                                    <p>data.comment</p> // **This is what I want to achieve**
                                </div>
                            </div>
                                `);

                     

                );
            
        );

    );
</script>

上面的 ajax 调用工作正常，我确实收到了数据。此外，我可以将此 html 插入到适当的 div 元素中。现在我想在 p 元素中插入 data.comment 值。

我该怎么做？

编辑 --1

使用 `$expression` 语法后，<p> 标记在浏览器控制台中显示为空白，而显然该值存在。

编辑--2

我不知道为什么，但 "<p>"+d.comment+"</p>" 正在工作。但不是插值。

【问题讨论】：

如此接近。模板字符串（或模板文字；字符串的反引号版本）使用语法$expression 来插入表达式。所以你只是错过了当前插值语法前面的$ :)

请注意，并非所有浏览器都支持模板文字

当我这样做时（反引号）...

【参考方案1】：

我可以看到您将 data 变量用于 ajax 响应和循环中数据的当前值。你确定你引用了正确的对象吗？

【讨论】：

即使我把它改成两个不同的变量，结果也是一样的。

【参考方案2】：

因为您使用的是反引号 (`)，所以您接近使用模板字符串。你只需要正确使用占位符：

const data = comment: 'The comment';
const result = `...<p>$ data.comment </p>...`;

console.log(result);

Documentation on Template Strings

【讨论】：

当我这样做时（反引号）...

@Naxi，如果你在success函数开头的console.log(data.comment)，有没有可能是空字符串？

我查过了，不是。它在 console.log 中正确显示了值，但在模板文字中却没有。