推遲執行對ES6模板字面

Question

我玩ES6 Template Literals新的功能和第一件事，來到我的頭Javascript的一個String.format讓我去有關實現原型：

String.prototype.format = function() { 
    var self = this; 
    arguments.forEach(function(val,idx) { 
    self["p"+idx] = val; 
    }); 
    return this.toString(); 
}; 
console.log(`Hello, ${p0}. This is a ${p1}`.format("world", "test")); 

ES6Fiddle

但是，模板文字評估之前它傳遞給我的原型方法。有什麼辦法可以編寫上面的代碼來推遲結果，直到動態創建元素之後？

Answer 1

我可以看到周圍這三種方式：

• 使用模板串像他們的目的是使用，無需任何format功能：

  console.log(`Hello, ${"world"}. This is a ${"test"}`); 
  // might make more sense with variables: 
  var p0 = "world", p1 = "test"; 
  console.log(`Hello, ${p0}. This is a ${p1}`); 
  // or even function parameters for actual deferral of the evaluation: 
  const welcome = (p0, p1) => `Hello, ${p0}. This is a ${p1}`; 
  console.log(welcome("world", "test")); 
  

• 不要使用模板字符串，但一個普通的字符串文字：

  String.prototype.format = function() { 
      var args = arguments; 
      return this.replace(/\$\{p(\d)\}/g, function(match, id) { 
       return args[id]; 
      }); 
  }; 
  console.log("Hello, ${p0}. This is a ${p1}".format("world", "test")); 
  

• 使用帶標籤的模板文字。請注意，取代將仍然沒有被處理程序攔截進行評估，所以你不能使用像p0標識符，而無需一個名爲這麼變量。 如果different substitution body syntax proposal is accepted此行爲可能會改變（更新：它不是）。

  function formatter(literals, ...substitutions) { 
      return { 
       format: function() { 
        var out = []; 
        for(var i=0, k=0; i < literals.length; i++) { 
         out[k++] = literals[i]; 
         out[k++] = arguments[substitutions[i]]; 
        } 
        out[k] = literals[i]; 
        return out.join(""); 
       } 
      }; 
  } 
  console.log(formatter`Hello, ${0}. This is a ${1}`.format("world", "test")); 
  // Notice the number literals:^   ^