如何正确地将包含空格的字符串分配给数据属性？

Question

我遇到了一个问题，我从服务器端获取的字符串是 仅一瓶 。我将该字符串分配给

之类的数据属性

var uom = serverSideValue // Contains ["one bottle only"]
<div class="uomClass" data-uom="+ JSON.stringify(uom) +"></div>

但是当我在开发人员工具中检查该元素时，它看起来像

data-uom="["one" only"]

如果不是JSON.stringify

data-uom="one" only

当我尝试访问 uom 时，如下所示

$('.uomClass').data('uom') 

以上代码行给出的结果只有 一个 而不是 一个水瓶

我在这里做错了什么。我正在动态构建上面的uom html。请引导我走正确的路。谢谢。

Answer 1

我在问题下方的评论部分采纳了 Rory McCrossan 的建议解决了这个问题。我用过 encodeURIComponent() and decodeURIComponent()

HTML代码

var uom = serverSideValue // Contains ["one bottle only"]
<div class="uomClass" data-uom="+ encodeURIComponent(uom) +"></div>

jQuery代码

var $uom = decodeURIComponent($('.uomClass').data('uom'))

现在我得到了正确的结果。谢谢 Rory McCrossan 的建议。