web-dev-qa-db-ja.com

テンプレート文字列の数値書式設定（Javascript-ES6）

Javascriptテンプレート文字列で数値をフォーマットできるかどうか、たとえば次のように思っていました。

var n = 5.1234;
console.log(`This is a number: $.2d{n}`);
// -> 5.12

または多分

var n = 5.1234;
console.log(`This is a number: ${n.toString('.2d')}`);
// -> 5.12

その構文は明らかに機能しません。それは私が探しているタイプの単なる例です。

underscore.stringのsprintfのようなツールを知っていますが、これは、特にテンプレート文字列の力を考えると、JSが箱から出せるはずの何かのように思えます。

[〜＃〜] edit [〜＃〜]

上記のように、私はすでにサードパーティのツール（sprintfなど）とこれを行うためのカスタマイズされた機能を知っています。同様の質問（例： JavaScriptはprintf/String.Formatと同等 ）では、おそらくテンプレート文字列について言及していません。おそらくES6テンプレート文字列が登場する前に質問されたためです。私の質問はES6に固有のものであり、実装には依存しません。その場合、「いいえ、これは不可能です」という答えを受け入れて非常に満足していますが、素晴らしいのは、これを提供する新しいES6機能に関する情報、またはそのような機能がその上にあるかどうかの洞察です仕方。

javascriptstring-formattingecmascript-6template-strings
24
aquavitae

いいえ、ES6は新しい数値書式設定関数を導入していません。既存の .toExponential(fractionDigits) 、 .toFixed(fractionDigits) 、 .toPrecision(precision) 、 .toString([radix]) および toLocaleString(…) （これは、オプションで ECMA-402 Standard をサポートします）。
テンプレート文字列は、数値の書式設定とは関係なく、関数呼び出し（タグ付きの場合）または文字列連結（デフォルト）に脱糖されます。

これらのNumberメソッドでは不十分な場合は、独自のメソッドをロールする必要があります。もちろん、書式設定関数をテンプレート文字列タグとして作成することもできます。

23
Bergi

数値のtoFixed（）メソッドを使用できるはずです。

var num = 5.1234;
var n = num.toFixed(2);
5
userDEV

これは、ES6の「rest」パラメータを使用した、Filip Allbergの上記ソリューションの完全にES6バージョンです。欠けている唯一のものは、精度を変えることができることです。これは、ファクトリー関数を作成することで実行できます。読者のための演習として残しました。

function d2(strs, ...args) {
    var result = strs[0];
    for (var i = 0; i < args.length; ++i) {
        var n = args[i];
        if (Number(n) == n) {
            result += Number(args[i]).toFixed(2);
        } else {
            result += args[i];
        }
        result += strs[i+1];
    }
    return result;
}

f=1.2345678;
s="a string";
console.log(d2`template: ${f} ${f*100} and ${s} (literal:${9.0001})`);
1
GaryO

ES6タグ関数を使用する場合は、次のようなタグ関数がどのように見えるか、

function d2(pieces) {
    var result = pieces[0];
    var substitutions = [].slice.call(arguments, 1);

    for (var i = 0; i < substitutions.length; ++i) {
        var n = substitutions[i];

        if (Number(n) == n) {
            result += Number(substitutions[i]).toFixed(2);
        } else {
            result += substitutions[i];
        }

        result += pieces[i + 1];
    }

    return result;
}

このようにして、テンプレート文字列に適用できます。

d2`${some_float} (you can interpolate as many floats as you want) of ${some_string}`;

フロートをフォーマットし、文字列をそのままにします。

1
Filip Allberg

テンプレート文字列の補間を使用した書式設定はビルトインとしては使用できませんが、 Intl.NumberFormat ：

const format = (num, fraction = 2) => new Intl.NumberFormat([], {
  minimumFractionDigits: fraction,
  maximumFractionDigits: fraction,
}).format(num);

format(5.1234); // -> '5.12'

選択した実装に関係なく、丸めエラーによって噛まれることがあることに注意してください。

(9.999).toFixed(2) // -> '10.00'

new Intl.NumberFormat([], {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2, // <- implicit rounding!
}).format(9.999) // -> '10.00'
0
Eliran Malka