用类似于C#的JavaScript格式化数字


73

是否有一种简单的方法可以用JavaScript格式化数字,类似于通过ToString("format_provider")或通过C#(或VB.NET)提供的格式化方法String.Format()


您可能应该看看JQuery NUMBERFORMATTER插件:Jquery Number Formatter以及以下问题:Javascript格式化数字的简便方法
karim79

1
@Darhuuk,其中有3260万人是可怕的...
Brad

Answers:


76

通常

在jQuery中


11
一个警告:您链接到的jQuery数字格式化程序(我在v1.1.0中尝试过)完全损坏且无用。如:它不工作,在所有。这是一个不错的格式设置插件:asual.com/jquery/format
Tomalak

@Tomalak,您应该将其发布为答案。那绝对是我使用过的最好的数字格式化插件。我希望单元测试之外有文档。
Brad

6
@Tomalak永远不会太晚。一年多以后,我正在这里看这个!
Cymen 2011年

3
和我差不多三年后!
shufler 2012年

1
autoNumeric功能十分强大,最近更新为1.8.0。
然后


25

这是一个简单的JS函数,用于将逗号添加到字符串格式的整数中。它将处理整数或十进制数。您可以将数字或字符串传递给它。它显然返回一个字符串。

function addCommas(str) {
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;

    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
        first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

这是一组测试用例:http : //jsfiddle.net/jfriend00/6y57j/

您可以看到它在先前的jsFiddle中正在使用:http : //jsfiddle.net/jfriend00/sMnjT/。您也可以通过简单的Google搜索“ javascript add逗号”找到也可以处理十进制数字的函数。

将数字转换为字符串可以通过多种方法完成。最简单的就是将其添加到字符串中:

var myNumber = 3;
var myStr = "" + myNumber;   // "3"

在jsFiddle的上下文中,您可以通过更改以下行来在计数器中添加逗号:

jTarget.text(current);

对此:

jTarget.text(addCommas(current));

您可以在这里看到它的工作:http : //jsfiddle.net/jfriend00/CbjSX/


@blackessej-我在答案的末尾添加了更多内容,以显示如何将addCommas添加到您的小提琴中。
jfriend00 2011年

addCommas()函数中增加了对十进制数字的支持,因此它适用于带有小数部分的数字。
jfriend00 2014年

负数不是那么热):
Kristopher

2
@Kristopher-我添加了对负数的支持。
jfriend00 '16

1
非常好。我现在正在用这个。
克里斯托弗

12

我写了一个简单的函数(不需要另一个jQuery插件!),它将一个数字转换成一个用十进制分隔的字符串,或者如果该数字不是以开头的数字,则将一个空字符串转换为:

function format(x) {
    return isNaN(x)?"":x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

format(578999); 结果是 578,999

format(10); 结果是 10

如果要用小数点代替逗号,只需用小数点代替代码中的逗号即可。

正确的注释之一指出,这仅适用于整数,您可以通过一些小的调整使其也适用于浮点数:

function format(x) {
    if(isNaN(x))return "";

    n= x.toString().split('.');
    return n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")+(n.length>1?"."+n[1]:"");
}

如果您先分割浮点部分,然后使用整数,然后再次添加流动点部分,它也应该适用于fp
patrick

"412.8".replace(/\B(?=(\d{3})+(?!\d))/g, ",");返回412.8。我认为它可能会回来412.80
JuniorMayhé15年

9

这里有一些解决方案,都通过了测试套件,测试套件和基准测试,如果您想复制和粘贴进行测试,请尝试This Gist

方法0(RegExp)

基于https://stackoverflow.com/a/14428340/1877620,但如果没有小数点,则进行修复。

if (typeof Number.prototype.format === 'undefined') {
    Number.prototype.format = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');
        a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,');
        return a.join('.');
    }
}

方法1

if (typeof Number.prototype.format1 === 'undefined') {
    Number.prototype.format1 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.'),
            // skip the '-' sign
            head = Number(this < 0);

        // skip the digits that's before the first thousands separator 
        head += (a[0].length - head) % 3 || 3;

        a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&');
        return a.join('.');
    };
}

方法2(拆分为数组)

if (typeof Number.prototype.format2 === 'undefined') {
    Number.prototype.format2 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');

        a[0] = a[0]
            .split('').reverse().join('')
            .replace(/\d{3}(?=\d)/g, '$&,')
            .split('').reverse().join('');

        return a.join('.');
    };
}

方法3(循环)

if (typeof Number.prototype.format3 === 'undefined') {
    Number.prototype.format3 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('');
        a.push('.');

        var i = a.indexOf('.') - 3;
        while (i > 0 && a[i-1] !== '-') {
            a.splice(i, 0, ',');
            i -= 3;
        }

        a.pop();
        return a.join('');
    };
}

console.log('======== Demo ========')
var n = 0;
for (var i=1; i<20; i++) {
    n = (n * 10) + (i % 10)/100;
    console.log(n.format(2), (-n).format(2));
}

分隔器

如果我们要自定义千位分隔符或十进制分隔符,请使用replace():

123456.78.format(2).replace(',', ' ').replace('.', ' ');

测试套件

function assertEqual(a, b) {
    if (a !== b) {
        throw a + ' !== ' + b;
    }
}

function test(format_function) {
    console.log(format_function);
    assertEqual('NaN', format_function.call(NaN, 0))
    assertEqual('Infinity', format_function.call(Infinity, 0))
    assertEqual('-Infinity', format_function.call(-Infinity, 0))

    assertEqual('0', format_function.call(0, 0))
    assertEqual('0.00', format_function.call(0, 2))
    assertEqual('1', format_function.call(1, 0))
    assertEqual('-1', format_function.call(-1, 0))
    // decimal padding
    assertEqual('1.00', format_function.call(1, 2))
    assertEqual('-1.00', format_function.call(-1, 2))
    // decimal rounding
    assertEqual('0.12', format_function.call(0.123456, 2))
    assertEqual('0.1235', format_function.call(0.123456, 4))
    assertEqual('-0.12', format_function.call(-0.123456, 2))
    assertEqual('-0.1235', format_function.call(-0.123456, 4))
    // thousands separator
    assertEqual('1,234', format_function.call(1234.123456, 0))
    assertEqual('12,345', format_function.call(12345.123456, 0))
    assertEqual('123,456', format_function.call(123456.123456, 0))
    assertEqual('1,234,567', format_function.call(1234567.123456, 0))
    assertEqual('12,345,678', format_function.call(12345678.123456, 0))
    assertEqual('123,456,789', format_function.call(123456789.123456, 0))
    assertEqual('-1,234', format_function.call(-1234.123456, 0))
    assertEqual('-12,345', format_function.call(-12345.123456, 0))
    assertEqual('-123,456', format_function.call(-123456.123456, 0))
    assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
    assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
    assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
    // thousands separator and decimal
    assertEqual('1,234.12', format_function.call(1234.123456, 2))
    assertEqual('12,345.12', format_function.call(12345.123456, 2))
    assertEqual('123,456.12', format_function.call(123456.123456, 2))
    assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
    assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
    assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
    assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
    assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
    assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
    assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
    assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
    assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
}

console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);

基准测试

function benchmark(f) {
    var start = new Date().getTime();
    f();
    return new Date().getTime() - start;
}

function benchmark_format(f) {
    console.log(f);
    time = benchmark(function () {
        for (var i = 0; i < 100000; i++) {
            f.call(123456789, 0);
            f.call(123456789, 2);
        }
    });
    console.log(time.format(0) + 'ms');
}

async = [];
function next() {
    setTimeout(function () {
        f = async.shift();
        f && f();
        next();
    }, 10);
}

console.log('======== Benchmark ========');
async.push(function () { benchmark_format(Number.prototype.format); });
async.push(function () { benchmark_format(Number.prototype.format1); });
async.push(function () { benchmark_format(Number.prototype.format2); });
async.push(function () { benchmark_format(Number.prototype.format3); });
next();


4

首先,在JS中将整数转换为字符串非常简单:

// Start off with a number
var number = 42;
// Convert into a string by appending an empty (or whatever you like as a string) to it
var string = 42+'';
// No extra conversion is needed, even though you could actually do
var alsoString = number.toString();

如果您使用数字作为字符串,并且希望将其转换为整数,则必须parseInt(string)对整数和parseFloat(string)浮点数使用。然后,这两个函数都返回所需的整数/浮点数。例:

// Start off with a float as a string
var stringFloat = '3.14';
// And an int as a string
var stringInt = '42';

// typeof stringInt  would give you 'string'

// Get the real float from the string
var realFloat = parseFloat(someFloat);
// Same for the int
var realInt = parseInt(stringInt);

// but typeof realInt  will now give you 'number'

您到底想尝试附加什么,对我来说仍然不清楚。


感谢那。您是否在jsfiddle上查看了我的代码?我基本上了解如何将整数转换为字符串-由于我对js的了解还不是很熟练,所以我不了解的是如何使用我正在使用的脚本的上下文来完成此操作。还有其他见解吗?
blackessej 2011年

@blackessej我不明白昏迷后必须附加什么。如果它只是计数,我建议使用浮动,如果你想2例如小数位,你可以简单地每次增加0.01数量,而不是由1
zatatatata

您真的必须忍受我-我不明白如何在我的代码中将我的数字转换为字符串。
blackessej 2011年

但是请务必使用parseInt(..., 10),以确保使用10为底。
pimvdb 2011年

不是这个问题的答案。他想(我也想)XXXXXXX.YYYY变成X,XXX,XXX.YYYY
托马什Zato -恢复莫妮卡

3

http://code.google.com/p/javascript-number-formatter/

  • 简短,快速,灵活但独立。仅75行,包括MIT许可证信息,空白行和注释。
  • 接受标准数字格式,例如#,## 0.00或带负号-000。####。
  • 接受任何国家/地区格式,例如### 0,00,#,###。##,#'###。##或任何类型的非编号符号。
  • 接受任意数量的数字分组。#,##,#0.000或#,### 0。##均有效。
  • 接受任何冗余/安全格式。##,###,##。#或0#,#00#。### 0#都可以。
  • 自动四舍五入。
  • 简单的界面,只需提供如下掩码和值:format(“ 0.0000”,3.141592)

更新

就像TomášZato所说的一种解决方案:

(666.0).toLocaleString()
numObj.toLocaleString([locales [, options]])

ECMA-262 5.1版中描述的内容:

并将在未来版本的浏览器中运行...


因为我只需要一个简单的函数就不想使用库...?
托马什Zato -恢复莫妮卡

这个功能简单吗:code.google.com/p/javascript-number-formatter/source/browse/…?我认为-是(60行代码)。
gotnkoa 2014年

您已经非常正确地说了“我认为”。那是因为事情是否简单取决于意见。意见之间没有绝对的真理,这使我们有机会进行无休止的争论。
托马什Zato -恢复莫妮卡

这就是SO,您的行为在SO用户中很典型。
Givenkoa 2014年

2
似乎您真的准备对我的评论发火了。你没有更好的事情吗?无论如何,一个班轮公司的跨国代码是(6666.0).toLocaleString()。如果您知道这样的注释超出主题并且可能会消失,则欢迎您随意调用任何行为。另外,请不要再试图让我取消对您的帖子的投票。您注定要失败,因为我没有对它投反对票。
托马什Zato -恢复莫妮卡

2

例如:

var flt = '5.99';
var nt = '6';

var rflt = parseFloat(flt);
var rnt = parseInt(nt);

1

使用JQuery

$(document).ready(function()
 {
    //Only number and one dot
    function onlyDecimal(element, decimals)
    {
        $(element).keypress(function(event)
        {
            num = $(this).val() ;
            num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
            {
                event.preventDefault();

            }
            if($(this).val() == parseFloat(num).toFixed(decimals))
            {
                event.preventDefault();
            }
        });
    }

     onlyDecimal("#TextBox1", 3) ;



});


1

要在逗号后得到带有2个数字的小数,可以使用:

function nformat(a) {
   var b = parseInt(parseFloat(a)*100)/100;
   return b.toFixed(2);
}

0

这是另一个版本:

$.fn.digits = function () {
    return this.each(function () {
        var value = $(this).text();
        var decimal = "";
        if (value) {
            var pos = value.indexOf(".");
            if (pos >= 0) {
                decimal = value.substring(pos);
                value = value.substring(0, pos);
            }
            if (value) {
                value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                $(this).text(value);
            }
        }
        else {
            value = $(this).val()
            if (value) {
                var pos = value.indexOf(".");
                if (pos >= 0) {
                    decimal = value.substring(pos);
                    value = value.substring(0, pos);
                }
                if (value) {
                    value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                    $(this).val(value);
                }
            }
        }
    })
};

0

我做了一个简单的功能,也许有人可以使用它

function secsToTime(secs){
  function format(number){
    if(number===0){
      return '00';
    }else {
      if (number < 10) {
          return '0' + number
      } else{
          return ''+number;
      }
    }
  }

  var minutes = Math.floor(secs/60)%60;
  var hours = Math.floor(secs/(60*60))%24;
  var days = Math.floor(secs/(60*60*24));
  var seconds = Math.floor(secs)%60;

  return (days>0? days+"d " : "")+format(hours)+':'+format(minutes)+':'+format(seconds);
}

这可以生成以下输出:

  • 5天02:53:39
  • 4天22:15:16
  • 03:01:05
  • 00:00:00

0

如果您要格式化数字以供查看而不是用于计算,则可以使用此格式

function numberFormat( number ){

    var digitCount = (number+"").length;
    var formatedNumber = number+"";
    var ind = digitCount%3 || 3;
    var temparr = formatedNumber.split('');

    if( digitCount > 3 && digitCount <= 6 ){

        temparr.splice(ind,0,',');
        formatedNumber = temparr.join('');

    }else if (digitCount >= 7 && digitCount <= 15) {
        var temparr2 = temparr.slice(0, ind);
        temparr2.push(',');
        temparr2.push(temparr[ind]);
        temparr2.push(temparr[ind + 1]);
        // temparr2.push( temparr[ind + 2] ); 
        if (digitCount >= 7 && digitCount <= 9) {
            temparr2.push(" million");
        } else if (digitCount >= 10 && digitCount <= 12) {
            temparr2.push(" billion");
        } else if (digitCount >= 13 && digitCount <= 15) {
            temparr2.push(" trillion");

        }
        formatedNumber = temparr2.join('');
    }
    return formatedNumber;
}

输入: {Integer}数字

输出: {String}数字

22,870 =>如果是22870

2287万=>如果数字2287xxxx(x可以是任意数字)

228.7亿=>如果是2287xxxxxxx

22,87万亿=>如果是2287xxxxxxxxxx

你明白了


0

为了进一步回答jfriend00(我没有足够的意见要发表),我将他/她的答案扩展到以下内容:

function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}

Number.prototype.addCommas = function (str) {
    if (str === undefined) {
    	str = this;
    }
    
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;
    
    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
    	  first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

var testCases = [
    1, 12, 123, -1234, 12345, 123456, -1234567, 12345678, 123456789,
    -1.1, 12.1, 123.1, 1234.1, -12345.1, -123456.1, -1234567.1, 12345678.1, 123456789.1
];
 
for (var i = 0; i < testCases.length; i++) {
	log(testCases[i].addCommas());
}
 
/*for (var i = 0; i < testCases.length; i++) {
    log(Number.addCommas(testCases[i]));
}*/



-1

您可以通过以下方式进行操作:因此,您不仅可以设置数字格式,还可以通过设置自定义十进制和英里分隔符作为参数来显示要显示的十进制数字。

function format(number, decimals = 2, decimalSeparator = '.', thousandsSeparator = ',') {
    const roundedNumber = number.toFixed(decimals);
    let integerPart = '', fractionalPart = '';
    if (decimals == 0) {
        integerPart = roundedNumber;
        decimalSeparator = '';
    } else {
        let numberParts = roundedNumber.split('.');
        integerPart = numberParts[0];
        fractionalPart = numberParts[1];
    }
    integerPart = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${thousandsSeparator}`);
    return `${integerPart}${decimalSeparator}${fractionalPart}`;
}

采用:

let min = 1556454.0001;
let max = 15556982.9999;
console.time('number format');
for (let i = 0; i < 15000; i++) {
    let randomNumber = Math.random() * (max - min) + min;

    let formated = format(randomNumber, 4, ',', '.'); // formated number

    console.debug('number: ', randomNumber, 'formated: ', formated);
}
console.timeEnd('number format');
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.