เพิ่มเครื่องหมายจุลภาคในตัวเลขทุกสามหลัก

160

ฉันจะจัดรูปแบบตัวเลขโดยใช้ตัวคั่นจุลภาคทุกสามหลักโดยใช้ jQuery ได้อย่างไร

ตัวอย่างเช่น:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝

jquery number-formatting

— สตีฟ
แหล่งที่มา

ฉันยังใหม่กับ jQuery และต้องการฟังก์ชั่น / ปลั๊กอินง่ายๆที่เพิ่งเพิ่มเครื่องหมายจุลภาคหลังจากทุกสามหลักหากตัวเลขมีความยาวมากกว่าสามหลัก ตัวเลขที่เป็นบวกเท่านั้นไม่มีเศษส่วนไม่มีทศนิยมไม่มีสกุลเงินที่เกี่ยวข้องและรูปแบบมาตรฐานของสหรัฐอเมริกา (1,111) ไม่ (1,111 $ หรือ $ 1,111.11) ฉันอยากจะทำโดยใช้ jQuery และไม่ใช่แค่ javascript ถ้าเป็นไปได้และจะดีตั้งรหัสชุดฟังก์ชั่นเพื่อให้สามารถใช้งานได้ง่ายมาก ฉันจะทำเช่นนั้นได้อย่างไร ชื่นชมการป้อนข้อมูลของทุกคน ขอบคุณอีกครั้ง.

— Steve

2

@unknown: คุณมีคำตอบมากมายแล้ว ดูคำตอบที่คุณได้รับและประเมินเพื่อดูว่าคำตอบใดดีที่สุดสำหรับคุณ หากคุณต้องการคำชี้แจงเพิ่มเติมสำหรับคำตอบข้อใดข้อหนึ่งให้โพสต์มันเพื่อแสดงความคิดเห็นในคำตอบนั้น

— Mark Byers

1

ขออภัยคำถามของฉันยังไม่รัดกุมพอ แต่ดูรูปแบบปลั๊กอินของ Doug Neiner โดยใช้รหัส Paul Creasey สำหรับคำตอบ

— Steve

241

@Paul Creasey มีทางออกที่ง่ายที่สุดเหมือนกับ regex แต่ที่นี่เป็น jQuery plugin ที่เรียบง่าย:

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

จากนั้นคุณสามารถใช้สิ่งนี้:

$("span.numbers").digits();

— Doug Neiner
แหล่งที่มา

4

ทำงานได้อย่างสมบูรณ์แบบ! ขอบคุณ Paul Creasey สำหรับโค้ดที่เรียบง่ายและขอบคุณ Doug Neiner ที่วางไว้ในรูปแบบปลั๊กอิน เครดิตที่มอบให้แก่ทั้งสอง

— Steve

4

RC @Mark Byers ไวยากรณ์ถูกต้อง '999.9999'.replace (/ (\ d) (? = (\ d \ d \ d) + (?! \ d)) / g, "$ 1,") ส่งคืน' 999.9,999 '

— bendewey

6

$.fn.digits = function(){     return this.each(function(){         $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );     }) }

— ทำตัวดัดแปลง

3

ผมคิดว่านี่จะเหมาะดีกว่าที่จะ jQuery $.digits = function() { ... };ฟังก์ชั่นสไตล์ยูทิลิตี้ชื่อเว้นระยะเช่น

— alex

63

วิธีที่เร็วที่สุดคือnumber.toLocaleString("en");

— Derek 朕會功夫

95

คุณสามารถใช้Number.toLocaleString():

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534

ขยายตัวอย่างข้อมูล

— Abhijeet
แหล่งที่มา

ผมเคยลอง แต่ไม่ได้ทำงานบนเซิร์ฟเวอร์สด แต่การทำงานใน localhost ..

— เอ Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.aspในเบราว์เซอร์ทั้งหมด

— ricks

สิ่งนี้ทำงานได้ง่ายที่สุดสำหรับฉัน ฉันต้องการสกุลเงินและเครื่องหมายจุลภาค ฉันสามารถตั้งค่าคุณสมบัติได้เช่นกัน:

var n = 26787.89 var myObjCurrency = {   style: "currency",   currency: "USD",   currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));

— AWP

78

บางอย่างเช่นนี้ถ้าคุณเข้าสู่ regex ไม่แน่ใจเกี่ยวกับไวยากรณ์ที่แน่นอนสำหรับ tho แทนที่!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

— Paul Creasey
แหล่งที่มา

2

ไวยากรณ์ถูกต้อง '999.9999'.replace (/ (\ d) (? = (\ d \ d \ d) + (?! \ d)) / g, "$ 1,") ส่งคืน' 999.9,999 '

— Mark Byers

@ ไม่รู้จักฉันย้ายไปที่คำตอบ มันอยู่ไกลในหน้านี้ด้วยตัวอย่างการใช้งาน

— Doug Neiner

27

คุณอาจจะลองNumberFormatter

$(this).format({format:"#,###.00", locale:"us"});

นอกจากนี้ยังรองรับสถานที่ต่าง ๆ รวมถึงหลักสูตร US ด้วย

นี่เป็นตัวอย่างที่ง่ายมากของวิธีใช้:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.numberformatter.js"></script>
        <script>
        $(document).ready(function() {
            $(".numbers").each(function() {
                $(this).format({format:"#,###", locale:"us"});
            });
        });
        </script>
    </head>
    <body>
        <div class="numbers">1000</div>
        <div class="numbers">2000000</div>
    </body>
</html>

เอาท์พุท:

1,000
2,000,000

— มาร์คเบเยอร์
แหล่งที่มา

ฉันดูที่ปลั๊กอินนี้และจากคำอธิบายของผู้เขียนมันถูกใช้ในฟิลด์อินพุตแบบฟอร์ม ฉันจะนำไปใช้เพื่อนำไปใช้กับ <span class = "numbers"> 2984 </span> ได้ดังนั้นจึงจัดรูปแบบเป็น <span class = "numbers"> 2,984 </span> โดยไม่มีทศนิยม ฉันลองใช้ $ ('span.numbers'). format ({format: "#, ###", locale: "us"}); แต่ไม่มีอะไรเกิดขึ้น ยังคงออกจากปลั๊กอินเล่นกับมัน ขออภัยฉันเป็นมือใหม่ jQuery :-)

— Steve

+1 ที่น่ารู้เกี่ยวกับปลั๊กอินนี้ ฉันยอมรับว่าสำหรับการเติบโตและความเป็นสากลในอนาคตนี่จะเป็นเส้นทางที่ดีที่สุดในการติดตาม

— Doug Neiner

นี่คือลิงค์ไปยัง repo GitHub github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

นี่ไม่ใช่ jQuery แต่ใช้งานได้สำหรับฉัน นำมาจากเว็บไซต์นี้

function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

— รังสี
แหล่งที่มา

1

มาก "ราก" ของคุณ :)

— MonoThreaded

"Rootsy" อาจเป็นไปได้ แต่ฉันไม่คิดว่าวิธีแฟนซีกางเกงอื่น ๆ จะทำงานในสถานการณ์ของฉันซึ่งข้อมูลถูกฝังอยู่ใน Canvas (Chart.JS) แต่การเพิ่มฟังก์ชั่นนั้นและเรียกมันในเหตุการณ์ afterDraw () ของแผนภูมิทำงานได้อย่างสมบูรณ์แบบ: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

สิ่งนี้ใช้ไม่ได้เช่น 3000000 (7 หลัก) เฉพาะ 6 หลักและน้อยกว่า!

— Mostafa Norzade

21

ใช้ฟังก์ชันหมายเลข ();

$(function() {

  var price1 = 1000;
  var price2 = 500000;
  var price3 = 15245000;

  $("span#s1").html(Number(price1).toLocaleString('en'));
  $("span#s2").html(Number(price2).toLocaleString('en'));
  $("span#s3").html(Number(price3).toLocaleString('en'));

  console.log(Number(price).toLocaleString('en'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="s1"></span><br />
<span id="s2"></span><br />
<span id="s3"></span><br />

ขยายตัวอย่างข้อมูล

— bamossza
แหล่งที่มา

ขอบคุณฉันใช้คำตอบของคุณ อาจเป็นเรื่องที่น่าสังเกตว่านี่รองรับเฉพาะตัวเลขที่มีความยาวสูงสุด 15 หลัก

— tallpaul

21

2559 คำตอบ:

Javascript มีฟังก์ชั่นนี้ดังนั้นไม่จำเป็นต้องใช้ Jquery

yournumber.toLocaleString("en");

— Kamy D
แหล่งที่มา

2

มันจะใช้ได้กับเบราว์เซอร์ทั้งหมดหรือไม่ มันทำงานได้ดีบนโครเมียม ใช้ได้กับ IE9 + & opera, safari หรือไม่

— Zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.aspรองรับเบราว์เซอร์ทั้งหมด

— ricks

1

เพียงตรวจสอบให้แน่ใจว่าหมายเลขที่คุณโทรหานั้นเป็นประเภทหมายเลข (int, float ฯลฯ .. ) และไม่ใช่สตริง

— el3ati2

16

ทางออกที่ละเอียดยิ่งขึ้น

หลักของการนี้คือการreplaceโทร จนถึงตอนนี้ฉันไม่คิดว่าโซลูชันที่เสนอใด ๆ จะจัดการกับกรณีต่อไปนี้ทั้งหมด:

จำนวนเต็ม: 1000 => '1,000'
Strings: '1000' => '1,000'
สำหรับสตริง:
- เก็บค่าศูนย์หลังจุดทศนิยม: 10000.00 => '10,000.00'
- ทิ้งเลขศูนย์นำหน้าทศนิยม '01000.00 => '1,000.00'
- ไม่เพิ่มเครื่องหมายจุลภาคหลังจุดทศนิยม: '1000.00000' => '1,000.00000'
- รักษาความเป็นผู้นำ-หรือ+ :'-1000.0000' => '-1,000.000'
- ส่งคืนไม่มีการแก้ไขสตริงที่มีตัวเลขที่ไม่ใช่ตัวเลข: '1000k' => '1000k'

ฟังก์ชั่นต่อไปนี้ทำทุกอย่างที่กล่าวมา

addCommas = function(input){
  // If the regex doesn't match, `replace` returns the string unmodified
  return (input.toString()).replace(
    // Each parentheses group (or 'capture') in this regex becomes an argument 
    // to the function; in this case, every argument after 'match'
    /^([-+]?)(0?)(\d+)(.?)(\d+)$/g, function(match, sign, zeros, before, decimal, after) {

      // Less obtrusive than adding 'reverse' method on all strings
      var reverseString = function(string) { return string.split('').reverse().join(''); };

      // Insert commas every three characters from the right
      var insertCommas  = function(string) { 

        // Reverse, because it's easier to do things from the left
        var reversed           = reverseString(string);

        // Add commas every three characters
        var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');

        // Reverse again (back to normal)
        return reverseString(reversedWithCommas);
      };

      // If there was no decimal, the last capture grabs the final digit, so
      // we have to put it back together with the 'before' substring
      return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
    }
  );
};

คุณสามารถใช้มันในปลั๊กอิน jQuery เช่นนี้:

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};

— นาธานลอง
แหล่งที่มา

9

คุณยังสามารถดูปลั๊กอินjquery FormatCurrency (ซึ่งฉันเป็นผู้เขียน); มีการรองรับหลายภาษาเช่นกัน แต่อาจมีค่าใช้จ่ายในการสนับสนุนสกุลเงินที่คุณไม่ต้องการ

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });

— bendewey
แหล่งที่มา

4

คำถามนี้ทำให้ฉันได้รับการปล่อยตัว v1.3 ของปลั๊กอินนี้ขอบคุณ

— bendewey

3

นี่คือจาวาสคริปต์ของฉันทดสอบกับ firefox และ chrome เท่านั้น

<html>
<header>
<script>
    function addCommas(str){
        return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function test(){
        var val = document.getElementById('test').value;
        document.getElementById('test').value = addCommas(val);
    }
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>

— หวด
แหล่งที่มา

1

วิธีที่ง่ายมากคือการใช้toLocaleString()ฟังก์ชั่น

tot = Rs.1402598 //Result : Rs.1402598

tot.toLocaleString() //Result : Rs.1,402,598

— Rifkan Razak
แหล่งที่มา

1

function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

คุณสามารถลองมันใช้งานได้สำหรับฉัน

— benoit1521
แหล่งที่มา