jQuery - html字符串中的千位分隔符答案

【问题标题】：jQuery - thousands seperator on html stringjQuery - html字符串中的千位分隔符
【发布时间】：2022-06-16 13:52:13
【问题描述】：

我正在尝试通过将.digits(); 添加到var sub 来为.htm(price * num) 结果添加千位分隔符。如何让千位分隔符处理var sub 的结果？由于它们不是val，我是否需要在添加digits(); 函数之前将结果转换为数字？

$(document).ready(function() {
  $.fn.digits = function() {
    return this.each(function() {
      $(this).val(
        $(this)
        .val()
        .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
      );
    });
  };
  var total = $(".slider__total").html();
  var sold = $(".sold").html();
  var available = total - sold;
  var price = $(".cost").html();
  var num = $("#num").html();
  $(".item__available").html(available);
  var sub = $("#slider_subtotal")
    .html(price * num)
    .digits();
  $(".qty").attr({
    max: available
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sold<span class="sold">3</span>total<span class="slider__total">10</span>available<span class="item__available"></span><input type="range" min="1" value="1" class="qty" name='quantity' oninput="num.value = this.value"><output id="num">0</output>unit:
$
<span class="cost">500</span>subtotal: $<span id="slider_subtotal">0</span>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以改用内置的Number.prototype.toLocaleString() 方法：

(1234567.567).toLocaleString('en-US') // 1,234,567.567

或者 - 如果你愿意 - 你也可以通过省略第一个参数来保持它对当前用户“本地”：(1234567.567).toLocaleString() 将引用浏览器的区域设置并返回一个合适的本地数字字符串。

$(document).ready(function() {
  var total = $(".slider__total").text();
  var sold = $(".sold").text();
  var available = total - sold;
  var price = $(".cost").text();
  
  $(".item__available").html(available);
  $(".qty").attr({max: available})
           .on("input",function(){
    $("#slider_subtotal").text((price * this.value).toLocaleString("en-US",{style:'currency', currency:'USD'}));
    $("#num").text(this.value)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sold<span class="sold">37</span>
total<span class="slider__total">103</span>
available<span class="item__available"></span>
<input type="range" min="1" value="1" class="qty" name='quantity'>
<output id="num">0</output>
unit:$<span class="cost">123.4</span>
subtotal: <span id="slider_subtotal">$0</span>

【讨论】：

【解决方案2】：

amount.toLocaleString('en-IN', {currency: 'INR', style: 'currency'}) 是获取印度千逗号分隔符的最佳 jquery 函数

toLocaleString

 var amount="9887977998";

//if amount symbol required
console.log(addCommaSeperatorForAmt(amount,true))


function addCommaSeperatorForAmt(amount, symbolRequired) {
        var amountDigit = "";
        if (!symbolRequired) {
            amountDigit = Number(amount).toLocaleString('en-IN', {currency: 'INR', style: 'currency'}).replaceAll(/₹/g, "");
        } else {
            amountDigit = Number(amount).toLocaleString('en-IN', {currency: 'INR', style: 'currency'});
        }
        return amountDigit;
    }

找到这个参考：https://www.w3schools.com/jsref/jsref_tolocalestring.asp

【讨论】：