如何将包含空格的字符串赋值给数据属性？

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()和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 提出建议。