您可以在模板文字字符串中使用注释吗？

Question

让我们说我们有一个多线es6模板字符串来描述，例如请求的一些URL参数：

const fields = `
    id,
    message,
    created_time,
    permalink_url,
    type
`;

有没有办法在反引号Template-String中添加注释？像：

const fields = `
    // post id
    id,
    // post status/message
    message,
    // .....
    created_time,
    permalink_url,
    type
`;

Answer 1

选项1：插值

我们可以创建返回空字符串的interpolation块，并将注释嵌入其中。

＆＃13;

const fields = `
  id, ${ /* post id */'' }
  message, ${ /* post status/message */'' }
  created_time,
  permalink_url,
  type
`;

console.log(fields);

＆＃13;

选项2：标记模板

使用tagged templates我们可以清除注释并重建字符串。这是一个简单的commented函数，它使用Array.map()，String.replace()和正则表达式（需要一些工作）来清除注释，并返回干净的字符串：

＆＃13;

const commented = (strings, ...values) => {
  const pattern = /\/{2}.+$/gm; // basic idea

  return strings
    .map((str, i) => 
      `${str}${values[i] !== undefined ? values[i] : ''}`)
    .join('')
    .replace(pattern, '');
};

const d = 10;
const fields = commented`
  ${d}
  id, // post ID
  ${d}
  message, // post/status message
  created_time, // ...
  permalink_uri,
  type
`;

console.log(fields);

＆＃13;

Answer 2

我知道这是一个陈旧的答案，但看到上面的答案，我觉得有必要回答纯粹的问题，然后回答提问者问题的精神。

您可以在模板文字字符串中使用注释吗？

是。是的你可以。但它并不漂亮。

const fields = `
    id, ${/* post ID */''}
    message, ${/* post/status message */''}
    created_time, ${/*... */''}
    permalink_url,
    type
`;

请注意，您必须将 ''（空字符串）放在 ${ } 大括号中，以便Javascript具有表达式插入。不这样做会导致运行时错误。引号可以放在评论之外的任何地方。

我不是这个的忠实粉丝。它非常丑陋并且使评论变得繁琐，并且在大多数IDE中都无法解决切换注释的问题。

就个人而言，我尽可能使用模板字符串，因为它们比普通字符串更有效，并且它们可以捕获所需的所有文本，大部分都没有转义。你甚至可以把函数调用放在那里！

上面例子中的字符串会有点奇怪，但是对于你正在寻找的东西可能没用，因为会有一个初始的换行符，逗号和注释之间有额外的空格，以及额外的最后一次换行。删除不需要的空间可能会带来很小的性能损失。为了速度和效率，你可以使用正则表达式，但是...更多关于以下内容...

现在回答问题的意图：

如何编写以逗号分隔的列表字符串，每行都有注释？

const fields = [
    "id", // post ID
    "message", // post/status message
    "created_time", //...
    "permalink_url",
    "type"
].join(",\n");

加入数组是一种方式......（由@ jared-smith建议）

但是，在这种情况下，您只创建一个数组，然后在仅指定join()函数的返回值时立即丢弃有组织的数据。不仅如此，您还要为数组中的每个字符串创建一个内存指针，直到范围结束时才会进行垃圾回收。在这种情况下，捕获数组，按照使用指示即时连接，或使用模板文字并以不同的方式注释您的实现（如ghostDoc样式）可能更有用。

您似乎只使用模板文字来满足每行上没有引号的愿望，最大限度地减少了'字符串'查询参数在网址和代码中查看时的认知不一致。你应该意识到这会保留换行符，我怀疑你是否想要这样。请考虑一下：

/****************
 * Fields:
 *   id : post ID
 *   message : post/status message
 *   created_time : some other comment...
 */
const fields = `
    id,
    message,
    created_time,
    permalink_uri,
    type
`.replace(/\s/g,'');

这使用正则表达式来过滤掉所有空格，同时保持列表可读和可重新排列。所有正则表达式文字都在捕获空格，然后替换方法用''替换捕获的文本（最后的g只是告诉正则表达式不要在它找到的第一个匹配处停止，这种情况下，第一个换行符char。）

或者，大多数情况下，您可以直接将注释放在模板文字中，然后使用正则表达式删除它们：

const fields = `
    id, // post ID
    message, // post/status message
    created_time, // ...
    permalink_uri,
    type
`.replace(/\s+\/\/.*\*\/\n/g,'').replace(/\s/g,'');

第一个正则表达式将查找并替换为空字符串（''）所有实例：在双斜杠之前的一个或多个空白字符（每个斜杠由反斜杠转义）后跟空格和新的线字符。如果你想使用/* multiline */条评论，这个正则表达式会变得有点复杂，你必须在最后添加另一个.replace()：

.replace(/\/\*.*\*\//g,'')

正则表达式只能在您删除\n换行符后才能执行，或者正则表达式与现在不是多行注释不匹配。这看起来像这样：

const fields = `
    id, // post ID
    message, /* post/
                status message */
    created_time, // ...
    permalink_uri,
    type
`.replace(/\s+\/\/.*\n/g,'').replace(/\s/g,'').replace(/\/\*.*\*\//g,'');

以上所有都会产生这个字符串：

"id,message,created_time,permalink_uri,type"

只有一个正则表达式可能有一种方法可以做到这一点，但它确实超出了范围。此外，我鼓励你自己和他们一起玩，爱上正则表达式！

我稍后会尝试获得https://jsperf.com/。我现在非常好奇！

Answer 3

没有。

该语法有效，但只返回包含\n// post id\nid的字符串，而不是删除注释并创建没有它们的字符串。

如果查看§11.8.6 of the spec，可以看到在反引号分隔符之间识别的唯一标记是 TemplateCharacters ，它接受转义序列，换行符和普通字符。在§A.1中， SourceCharacter 被定义为任何Unicode点（11.8.6中排除的除外）。

Answer 4

不要使用模板字符串：

const fields = [
    'id',  // comment blah blah
    'message',
    'created_time',
    'permalink_url',
    'type'
].join(',');

您在初始化时支付数组和方法调用的成本（假设JIT不够智能，无法完全优化它。

正如ssube所指出的，结果字符串不会保留换行符或空格。这取决于重要性，你可以手动添加＆＃39; ＆＃39;和＆＃39; \ n＆＃39;如果有必要或决定你真的不需要内联评论。

更新

请注意，将编程数据存储在字符串中通常保持为bad idea：将它们存储为命名变量或对象属性。由于你的评论反映了你刚刚把一堆东西转换成了一个 url查询字符串：

const makeQueryString = (url, data) => {
  return url + '?' + Object.keys(data)
    .map(k => `${k}=${encodeURIComponent(data[k))})
    .join('&');
};

let qs = makeQueryString(url, {
  id: 3,
  message: 'blah blah',
  // etc.
});

现在，您可以更轻松地更改，理解，重用和更透明的代码分析工具（例如您选择的IDE中的那些工具）。

是否可以在es6 Template-String中添加注释？

4 个答案:

您可以在模板文字字符串中使用注释吗？

是。是的你可以。但它并不漂亮。

如何编写以逗号分隔的列表字符串，每行都有注释？

更新