js 使用 format 格式化字符串

在 Java 等编程语言里，有 String.format 方法能用来格式化字符串，用起来很方便，在 JavaScript 中大部分是用加号来拼接字符串，比如：

var s = "Hello " + " World"

在 JavaScript 也有类似 java 的 String.format 方法来格式化字符串。

方法1：利用 ES6 模板字符串

现在主流的浏览器（如最新版 Chrome）都已经支持 ES6 语法，其中的模板字符串可以直接实现字符串的格式化。

使用方法很简单，用反引号（）包裹字符串，变量部分用 ${变量名}` 嵌入即可。示例如下：

var name = 'letian';
var s = `Hello ${name}`;
console.log(s); // 输出结果：Hello letian

这种方式无需额外定义函数，语法直观，适合简单的字符串拼接场景。

方法2：自定义 format 方法

如果需要更灵活的格式化功能，可以通过自定义方法来实现。

1. 在 String 原型上添加 format 方法

先尝试在 String 原型上扩展 format 函数，初期实现代码如下：

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

使用示例：

var s = '你好 {0} {1}'.format('value1', 123);
console.log(s); // 输出结果：你好 value1 123

使用该方法注意 {0},{1} 的顺序，只能按{0}{1}的位置输出，无法输出{1}{0}。

2. 修复原型链上的 format 方法

针对上述 bug，优化后的代码如下：

if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    // 使用正则匹配 {数字} 格式的占位符
    return this.replace(/{(\d+)}/g, function(match, number) { 
      // 判断参数是否存在，存在则替换，否则保留原占位符
      return typeof args[number] != 'undefined'
        ? args[number]
        : match
      ;
    });
  };
}

优化后，之前的问题得以解决，'{0} {1}'.format('{1}', '{0}') 能正确输出 {1} {0}。

方法3：实现 String.format 静态方法

如果不想通过字符串实例调用（即不想用 .format 的形式），可以定义 String 静态方法 format。代码如下：

if (!String.format) {
  String.format = function(format) {
    // 截取从第二个开始的参数作为替换值
    var args = Array.prototype.slice.call(arguments, 1);
    return format.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number] 
        : match
      ;
    });
  };
}

使用示例：

String.format('{0}', 'Hello'); // 输出结果：Hello