如何在 jQuery-UI 滑块中使用逗号格式化？

Question

在这里，我使用了 jquery-ui.js，以便它显示从 0 到 2000000 的数字，我想显示格式为 2,000,000 的长数字

<div class="slider>
<a id="minamount" style="">0</a>
<a id="maxamount" style="">2000000</a>
</div>

javascript：

$(".slider").slider({
            min: 0,
            max: 2000000,
            values: [0, 2000000],
            range: true,

            step: 10,

            slide: function (event, ui) {
               $("#minamount").html(ui.values[0]);
               $("#maxamount").html(ui.values[1]);
            }
});

Answer 1

你可以使用Intl.NumberFormat() 来做这件事 -

const numberFormat = new Intl.NumberFormat();
$(".slider").slider({
            min: 0,
            max: 2000000,
            values: [0, 2000000],
            range: true,

            step: 10,

            slide: function (event, ui) {
               $("#minamount").html(numberFormat.format(ui.values[0]));
               $("#maxamount").html(numberFormat.format(ui.values[1]));
            }
});

如果您希望根据特定语言环境对其进行格式化，您可以根据文档为您的语言环境传递一组值。

注意：在初始加载时，slide函数没有被调用，这种情况下，您可以在初始化后手动调用滑块的slider('values')函数来手动设置开头的HTML。

编辑：

查找sample Fiddle to play around

Answer 2

要使用千位分隔符（例如12,345）格式化字符串，您可以使用toLocaleString()。

$("#minamount").html(ui.values[0].toLocaleString());

参见下面的 sn-p。

for (var i = 1.234; i < 10000000; i *= 10)
{  
  console.log(i.toLocaleString());
}