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

Question

假设我们有一个多行es6 Template-String来描述例如请求的一些URL参数:

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

有没有办法在反引号模板字符串中有注释？喜欢:

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

Answer 1

选项1:插值

我们可以创建返回空字符串的插值块,并将注释嵌入其中.

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

console.log(fields);

选项2:标记模板

使用标记模板,我们可以清除注释并重建字符串.这是一个简单的commented函数,它使用Array.map(),String.replace()和一个正则表达式(需要一些工作)来清除注释,并返回干净的字符串:

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);

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样式)可能更有用.

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

/****************
 * 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最后只是告诉正则表达式不要停在它找到的第一个匹配,在这种情况下,第一个换行符.)

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

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,可以看到在反引号分隔符之间识别的唯一标记是TemplateCharacters,它接受转义序列,换行符和普通字符.在§A.1中,SourceCharacter被定义为任何Unicode点(除了11.8.6中排除的那些点).