JavaScript 字符串拼接的解決方案 模板字符串 String實例的format()方法 自定義字符串格式化format規則

場景

拼接多個變量，不想用字符串拼接符+，也不想用console.log(...args)依次打印多個參數。

那麼有兩種解決方法：

1. ES6新特性中的模板字符串
2. String實例的format()方法。

Demo

1. 模板字符串

var name = "張三";
var age = "22";
var result = `${name} 今年 ${age} 歲了`;
console.log(result);
張三 今年 22 歲了

模板字符串用反引號包圍，其中的${變量名}可用於變量值的replace操作。

2. 字符串對象的format()方法。

var result = "{0} 今年 {1} {2} {1}".format("張三", 20);
console.log(result);
VM1793:2 張三 今年 20 {2} 20

要注意二者的區別：
format()方法替換變量的規則是{編號}，這個編號從0開始。如果format()方法的參數數量不足，則會出現${2}這樣的情況。

代碼分析

以下爲String原型鏈的format()方法的內部實現：

String.prototype.format.toString()
"function(){var e=arguments;return!!this&&this.replace(/\{(\d+)\}/g,function(t,r){return e[r]?e[r]:t})}"

格式化代碼後：

function () {
    var e = arguments;
    return !!this && this.replace(/\{(\d+)\}/g, function (t, r) {
        return e[r] ? e[r] : t
    })
}

模板字符串是語法層次，如何實現我無從得知。
但是就format()方法而言，其本質是一個制定規則的字符串替換操作。

規則別人可以定義，自己也可以定義。但，只有大家都同意(或產生交互的各個角色都同意)的規則，才能稱爲協議 protocol，
如：HTTP, FTP等。

自定義字符串方法

可以自己寫過，不推薦使用
利用JS的原型鏈，可以向JS的對象添加方法。

如何向String類型添加方法？

String.prototype.myFormat = function () {
    var e = arguments;
    return !!this && this.replace(/__(\d+)__/g, function (t, r) {
        return e[r] ? e[r] : t
    })
}

var result = "__0__ 今年 __1__ 歲了".myFormat("張三", 22);
console.log(result);

以上，我自定義了一個實例方法myFormat()，其實現抄了原format()，只不顧是將替換規則{序號}修改爲了__序號__。
即：/\{(\d+)\}/g改爲/__(\d+)__/g。(其實作爲方法的定義者，你可以自定義任何的規則，然後自己去寫實現邏輯)。
運行截圖如下：