如何在 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

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

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

请参阅下面的代码段。

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

Answer 2

您可以使用 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')函数，手动设置[=28] =]开头。

编辑：

找一个sample Fiddle to play around

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

How format with commas in jQuery-UI slider?

javascript

jquery-ui