模板字符串中的数字格式化(Javascript - ES6)

Number formatting in template strings (Javascript - ES6)

本文关键字：Javascript ES6 格式化 数字 字符串      更新时间：2023-09-26

我想知道是否有可能在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

这种语法显然行不通，它只是我正在寻找的东西类型的一个说明。

我知道像sprintf这样的工具来自underscore.string，但这似乎是JS应该能够做的事情，特别是考虑到模板字符串的力量。

编辑

如上所述，我已经知道第三方工具(例如sprintf)和自定义函数可以做到这一点。类似的问题(例如JavaScript等价于printf/String.Format)根本没有提到模板字符串，可能是因为这些问题是在ES6模板字符串出现之前问的。我的问题是针对ES6的，与实现无关。如果是这种情况，我很乐意接受"不，这是不可能的"的回答，但最好是关于ES6提供这一功能的新功能的信息，或者一些关于这样的功能是否正在进行中的见解。

不，ES6没有引入任何新的数字格式功能，您将不得不与现有的.toExponential(fractionDigits), .toFixed(fractionDigits), .toPrecision(precision), .toString([radix])和toLocaleString(…)一起生活(虽然已经更新以可选地支持ECMA-402标准)。
模板字符串与数字格式无关，它们只是转换为函数调用(如果标记)或字符串连接(默认)。

如果这些Number方法对你来说还不够，你将不得不自己动手。当然，如果你愿意的话，你也可以把你的格式化函数写成一个模板字符串标签。

您应该能够使用数字的toFixed()方法:

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

如果你想使用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}`;

将格式化浮点数并保留字符串。

这是上面philip Allberg解决方案的完整ES6版本，使用了ES6的"rest"参数。唯一缺少的是能够改变精度;这可以通过制造工厂功能来实现。留给读者作为练习。

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

虽然模板字符串插值格式不是内置的，但您可以使用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'

基于ES6 Tagged Templates (credit to https://stackoverflow.com/a/51680250/711085)，这将模拟其他语言中的典型模板字符串语法(这是基于python f-strings;我避免将其称为f，以防名称重叠):

演示:

> F`${(Math.sqrt(2))**2}{.0f}`  // normally 2.0000000000000004
"2"
> F`${1/3}{%} ~ ${1/3}{.2%} ~ ${1/3}{d} ~ ${1/3}{.2f} ~ ${1/3}"
"33% ~ 33.33% ~ 0 ~ 0.33 ~ 0.3333333333333333"
> F`${[1/3,1/3]}{.2f} ~ ${{a:1/3, b:1/3}}{.2f} ~ ${"someStr"}`
"[0.33,0.33] ~ {'"a'":'"0.33'",'"b'":'"0.33'"} ~ someStr

相当简单的代码使用:

var FORMATTER = function(obj,fmt) {
    /* implements things using (Number).toFixed:
       ${1/3}{.2f} -> 0.33
       ${1/3}{.0f} -> 1
       ${1/3}{%} -> 33%
       ${1/3}{.3%} -> 33.333%
       ${1/3}{d} -> 0
       ${{a:1/3,b:1/3}}{.2f} -> {"a":0.33, "b":0.33}
       ${{a:1/3,b:1/3}}{*:'.2f',b:'%'} -> {"a":0.33, "b":'33%'}  //TODO not implemented
       ${[1/3,1/3]}{.2f} -> [0.33, 0.33]
       ${someObj} -> if the object/class defines a method [Symbol.FTemplate](){...}, 
                     it will be evaluated; alternatively if a method [Symbol.FTemplateKey](key){...} 
                     that can be evaluated to a fmt string; alternatively in the future 
                     once decorators exist, metadata may be appended to object properties to derive 
                     formats //TODO not implemented
    */
    try {
        let fracDigits=0,percent;
        if (fmt===undefined) {
            if (typeof obj === 'string')
                return obj;
            else
                return JSON.stringify(obj);
        } else if (obj instanceof Array)
            return '['+obj.map(x=> FORMATTER(x,fmt))+']'
        else if (typeof obj==='object' && obj!==null /*&&!Array.isArray(obj)*/)
            return JSON.stringify(Object.fromEntries(Object.entries(obj).map(([k,v])=> [k,FORMATTER(v,fmt)])));
        else if (matches = fmt.match(/^'.('d+)f$/))
            [_,fracDigits] = matches;
        else if (matches = fmt.match(/^(?:'.('d+))?(%)$/))
            [_,fracDigits,percent] = matches;
        else if (matches = fmt.match(/^d$/))
            fracDigits = 0;
        else
            throw 'format not recognized';
        
        if (obj===null)
            return 'null';
        if (obj===undefined) {
            // one might extend the above syntax to 
            // allow for example for .3f? -> "undefined"|"0.123"
            return 'undefined';
        }
        
        if (percent)
            obj *= 100;
        
        fracDigits = parseFloat(fracDigits);
        return obj.toFixed(fracDigits) + (percent? '%':'');
    } catch(err) {
        throw `error executing F'`$'{${someObj}'}{${fmt}}'` specification: ${err}`
    }
}
function F(strs, ...args) {
    /* usage: F`Demo: 1+1.5 = ${1+1.5}{.2f}` 
          --> "Demo: 1+1.5 = 2.50" 
    */
    let R = strs[0];
    args.forEach((arg,i)=> {
        let [_,fmt,str] = strs[i+1].match(/(?:'{(.*)(?<!'')'})?(.*)/);
        R += FORMATTER(arg,fmt) + str;
    });
    return R;
}

旁注:代码的核心如下。繁重的工作由格式化程序完成。负向后看在某种程度上是可选的，并且让一个人转义实际的大括号。

    let R = strs[0];
    args.forEach((arg,i)=> {
        let [_,fmt,str] = strs[i+1].match(/(?:'{(.*)(?<!'')'})?(.*)/);
        R += FORMATTER(arg,fmt) + str;
    });

可以使用es6标记函数。我不知道是否准备好使用它。

它可能看起来像这样:

num`This is a number: $.2d{n}`

了解更多:

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  • https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
相关文章：