标签: tagged-templates

我不知道如何解释这个,但是当我跑步时

console.log`1`

在谷歌浏览器中,我得到的输出就像

console.log`1`
VM12380:2 ["1", raw: Array[1]]

为什么反引号调用日志函数,为什么它的索引是raw: Array[1]？

Catgocat在JS房间里提出了一个问题,但除了一些关于模板字符串的内容之外没有任何答案是有意义的,因为这些字符串并不真正适合发生这种情况的原因.

我理解ES6 标记模板的语法.我看不到的是实用性.什么时候比传递一个对象参数更好,比如jQuery的AJAX中的设置？$.ajax('url', { /*this guy here*/ })

现在我只看到棘手的语法,但我不明白为什么我需要/使用它.我还发现TypeScript团队选择在其他重要功能之前实现它(在1.5中).标记字符串模板背后的概念是什么？

根据MDN,Tagged模板文字可以使用如下:

var a = 5;
var b = 10;
function tag(strings, ...values) {
  alert(strings[0]); // "Hello "
  alert(strings[1]); // " world "
  alert(values[0]); // 15
  alert(values[1]); // 50
  return "Bazinga!";
}
tag `Hello ${ a + b } world ${ a * b }`; // "Bazinga!"

在上面的示例中,tag不使用括号调用该函数.

我希望它应该被调用tag(`Hello`),但是它将模板文字产生的字符串作为函数参数的strings参数传递.

调用没有括号但带参数的函数的特殊功能是什么？

我遇到过这个例子,完全迷失了......

const test = (hey) => console.log(hey);

console.log(test `wtf`); 

首先这一切都是有效的,在console.log中,它似乎是

["wtf", raw: Array[1]]

这就像功能已被执行并有额外的raw？有人可以解释一下吗？

我在以下代码中使用标记的模板字符串

var a = 5;
var b = 10;
var pp="";
function tag(strings, ...values) {
  pp+=strings[0]; // "Hello "
  pp+=strings[1]; // " world "
  pp+=values[0];  // 15
  pp+=values[1];  // 50

  console.log(pp+"Bazinga!");
}

tag`Hello ${ a + b } world ${ a * b}`;

但它给了

未捕获的SyntaxError:意外的令牌......(...)

上 function tag(strings, ...values) {

我想创建一个可以正常调用的函数：

myFn(arg1, arg2)

或者作为标记模板文字：

myFn`text ${someVar}`

在 的实现中myFn，是否可以检测它是正常调用还是作为标记模板文字调用？传递给模板文字的参数具有特定的模式（第一个参数是字符串数组，附加参数（如果存在）将比第一个参数中数组的长度少一个），因此我可以根据该模式进行检测。但理论上有人可以将相同的参数模式传递给正常的函数调用。

除了参数模式检测之外，是否有任何特殊的方法来检测它的调用方式？

在学习了这个 Es6 标签模板示例之后：

var yo = func`${x} + ${y}\n= ${x + y}`;

one@public-node ~/es6 $ 6to5 tag.js 
"use strict";

var _taggedTemplateLiteral = function (strings, raw) {
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
};

var yo = func(_taggedTemplateLiteral(["", " + ", "\n= ", ""], ["", " + ", "\\n= ", ""]), x, y, x + y);

我看到返回的是 var yo = func(strings, raw, x, y, x + y);

我了解有关字符串文字和x y插入值的基础知识。我不明白的是……什么时候使用字符串，什么时候使用原始字符串？由于该函数具有两个数组，并且用户无法控制该函数何时使用 raw 以及何时使用煮熟的（字符串）。

我想插入一个模板字符串（在其他地方定义）：

const url = `www.example.com/${query}/current.json`;

带有动态值（例如“es6”）：

"www.example.com/es6/current.json"

例如，如果我有这样的事情：

function makeRequest(url, query){
  // how do I generate my final url, here from the url and query?
}

// somehwere else:
makeRequest(url, query)

带标签的模板字符串和标签函数是正确的方法吗？我见过很多不同的例子，但没有一个适合这种特殊情况。

我最近了解到，当使用模板文字作为参数时，ES6 允许在没有括号的情况下进行函数调用。例如

showstring`Hello World`;

但是，在阅读了有关此功能的几篇文章后，我对 JS 如何处理这些调用背后的逻辑知之甚少。

在玩弄了我的代码的一些排列之后，我仍然在努力拼凑模板文字在函数内部如何分解的模式，当人们以这种方式调用它时。

showstring`Hello World`;

上面代码中发生的事情很简单，字符串文字作为数组接收，其中第一个也是唯一的元素是字符串。

一旦我开始在模板中使用表达式，就会有点令人困惑。例如

const showstring = (str) => {
  console.log(str);
}
showstring`Hello World`;

所以看起来这...values部分破坏了所有的表达式。但是，为什么str数组在这些位置有空字符串呢？

我只是没有完全理解它在这里遵循的模式。有人可以解释一下这个功能吗？或者给我指点一篇好文章？

while (c) {
  tag`str0 ${e} str1`
}

JavaScript运行时创建一个冻结的数组,Object.freeze(['str0 ', ' str1'])但具有附加.raw属性.

是否可以将该对象用作a中的键,WeakMap以避免每次循环时都必须基于数组重做工作？

const memoTable = new WeakMap
function tag(templateStrings, ...values) {
  let cached = memoTable.get(templateStrings)
  if (!cached) {
    // Compute cached and put it in the table for next time.
  }
  // Do something with cached and values
}

第12.2.9.3节运行时语义:GetTemplateObject(templateLiteral)描述了如何缓存此值:

2. 让领域成为当前的领域记录.
3. 让templateRegistry成为领域.[[TemplateMap]].

所以从tag上面的循环中使用它应该是相同的,这将是一个很好的属性的密钥.

在我看来,[[TemplateMap]]必须弱引用模板对象数组,否则

for (let i = 0; i …

我的目标是编写一个标记模板函数，例如

myTemplateTagFunction`some text ${variable} etc. etc.`

...其行为类似于 javascript 中的默认模板文字函数。

我的第一次尝试是

let myTaggedTemplate = args => `${args}`

但这很快就打破了......

> myTaggedTemplate`hello world ${2 + 5}`
// "hello world ,"

> `hello world ${2 + 5}`
// "hello world 7"

一定有一种我缺少的更简单的方法可以做到这一点？