Question

我的代码是这样的：

<script>
var res = `
        <a href="#" id="edit-image"
           data-toggle="modal"
           data-target="#modal-edit-image"
           data-photo="`+JSON.stringify(photo)+`" 
        >
            <span class="fa fa-pencil"></span>
        </a>`;                                                 
</script>

console.log(photo)的结果如下：

对象{id：5，名称：＆＃34; IMziQFBIxFEFQHdjlg3mGXEVuQnwqZ5rYigX2jlq.jpeg＆＃34;， alt：＆＃34; dea＆＃34;}

我想将其更改为json字符串并将其保存在变量res

中

我就像上面的代码一样，但是如果我检查元素，我会复制元素结果如下：

<a href="#" id="edit-image" data-toggle="modal" data-target="#modal-edit-image" data-photo="{" id":5,"name":"imziqfbixfefqhdjlg3mgxevuqnwqz5ryigx2jlq.jpeg","alt":"dea"}"="">
    <span class="fa fa-pencil"></span>
</a>

看来json stringfy在元素不整洁

中

我该如何解决？

Answer 1

JSON.stringify使用"作为默认字符串分隔符。只需在data-photo引号中包含'属性的值，而不是"引号：

var res = `
    <a href="#" id="edit-image"
        data-toggle="modal"
        data-target="#modal-edit-image"
        data-photo='${JSON.stringify(photo)}'
    //             ^ here                   ^ and here
    >
        <span class="fa fa-pencil"></span>
    </a>`;

注1：使用Template Literals的一个好处是，您可以使用${}代替+ ... +语法。

注2：如果对象photo的属性中包含'引号，则如下所示：

var photo = {id: 5, name: "I'm here.jpg", alt: ""};
//                         ^^^

然后你必须像this一样逃避它：

JSON.stringify(photo).replace(/'/g, "&#39;")
//                   ^^^^^^^^^^^^^^^^^^^^^^^ replace all single quotes with their escaped values

在最后一个方法之后，您可以像问题中的代码一样保留双引号，但这次要转义双引号：

var res = `
    <a href="#" id="edit-image"
        data-toggle="modal"
        data-target="#modal-edit-image"
        data-photo="${JSON.stringify(photo).replace(/"/g, "&#34;")}"
    //             ^ here                                          ^ and here
    // use double quotes to surround the value of data-photo and excape " in the result of JSON.stringify
    >
        <span class="fa fa-pencil"></span>
    </a>`;

如何在字符串javascript中添加json stringify？

1 个答案: