web-dev-qa-db-ja.com

C＃に似たJavaScriptで数値をフォーマットする

ToString("format_provider")またはString.Format()を介してC＃（またはVB.NET）で利用可能なフォーマット方法と同様に、JavaScriptで数値をフォーマットする簡単な方法はありますか？

javascriptjqueryformatnumbers
72
xiemails

おそらく、JQuery NUMBERFORMATTERプラグインをご覧ください。

Jquery Number Formatter

そしてこの質問：

Javascriptで数値をフォーマットする簡単な方法

9
karim79

一般的に

jQueryで

75
rahul

はい、javascriptで数値を適切にフォーマットする方法は間違いなくあります。例：

var val=2489.8237

val.toFixed(3) //returns 2489.824 (round up)
val.toFixed(2) //returns 2489.82
val.toFixed(7) //returns 2489.8237000 (padding)

Variablename。toFixedを使用します。

また、別の関数toPrecision()があります。詳細については、こちらもご覧ください

http://raovishal.blogspot.com/2012/01/number-format-in-javascript.html

48
Vishal Barot

文字列形式の整数にカンマを追加する簡単な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/ 。 「javascript addカンマ」の単純なGoogle検索で、10進数も処理する関数を見つけることができます。

数値を文字列に変換するには、さまざまな方法があります。最も簡単なのは、単に文字列に追加することです。

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

JsFiddleのコンテキスト内で、次の行を変更することにより、カウンターにコンマを取得します。

jTarget.text(current);

これに：

jTarget.text(addCommas(current));

ここで動作していることがわかります： http://jsfiddle.net/jfriend00/CbjSX/

24
jfriend00

数値が10進数で区切られた文字列に変換される単純な関数（まだ別のjQueryプラグインは必要ありません!!）を作成しました。

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

format(578999);は578,999になります

format(10);は10になります

コンマの代わりに小数点を使用する場合は、コード内のコンマを小数点に置き換えます。

コメントの1つは、これは整数に対してのみ機能することを正しく述べていましたが、いくつかの小さな適応により、浮動小数点に対しても機能させることができます。

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]:"");
}
12
patrick

いくつかのソリューションがあります。すべてテストスイート、テストスイート、ベンチマークが含まれています。コピーして貼り付けてテストする場合は、 This Gist を試してください。

方法0（RegExp）

https://stackoverflow.com/a/14428340/187762 に基づきますが、小数点がない場合は修正します。

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();
9
Steely Wing

JQueryを使用したくない場合は、 Numeral.js をご覧ください

7
adamwdraper

まず、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'

正確に何を追加しようとしていますか、あなたの質問から私には不明のままです。

4
zatatatata

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

  • 短く、速く、柔軟でありながらスタンドアロン。 MITライセンス情報、空白行およびコメントを含む75行のみ。
  • ＃、## 0.00などの標準の数値形式を受け入れるか、-000。####を否定します。
  • ＃## 0,00、＃、###。##、＃ '###。##または任意のタイプの非番号記号など、国の形式を受け入れます。
  • 任意の数の数字のグループ化を受け入れます。 ＃、##、＃0.000または＃、### 0。##はすべて有効です。
  • 冗長/フールプルーフ形式を受け入れます。 ##、###、##。＃または0＃、＃00＃。### 0＃はすべてOKです。
  • 自動番号丸め。
  • シンプルなインターフェース、次のようなマスクと値を指定するだけです：format（ "0.0000"、3.141592）

UPDATE

TomášZatoのように、ここで1行のソリューション：

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

eCMA-262 5.1 Editionで説明されています：

ブラウザの将来のバージョンで動作します...

3
gavenkoa

例えば：

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

var rflt = parseFloat(flt);
var rnt = parseInt(nt);
2
Jake Badlands

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
Adrian

コンマの後に2つの数字がある小数を取得するには、次のように使用できます。

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

numbro ロケールベースのフォーマットと number-format.js をお勧めします。ユースケースに応じて2つの組み合わせが役立つ場合があります。

0
John Stephenson

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]));
}*/
0
Graham Harris

別のバージョンを次に示します。

$.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
user673117

単純な関数を作成しました。誰かが使用できるかもしれません

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);
}

これにより、次の出力が生成されます。

  • 5d 02:53:39
  • 4d 22:15:16
  • 03:01:05
  • 00:00:00
0
Alejandro Silva

計算ではなく表示用に数値をフォーマットする場合は、これを使用できます

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;
}

入力： {整数}数値

出力： {String} Number

22,870 =>番号22870の場合

22,87百万=>番号2287xxxxの場合（xは何でもかまいません）

22,87十億=>番号2287xxxxxxxの場合

22,87兆=>番号2287xxxxxxxxxxの場合

あなたはアイデアを得る

0
Herbi Shtini