标签: template-literals

在es6模板文字中,如何在不在字符串中创建新行的情况下将长模板文字包装到多行？

例如,如果您这样做:

const text = `a very long string that just continues
and continues and continues`

然后它将为字符串创建一个新的行符号,将其解释为具有新行.如何在不创建换行符的情况下将长模板文字包装到多行？

tl; dr:是否可以制作可重复使用的模板文字？

我一直在尝试使用模板文字,但我想我只是没有得到它,现在我感到沮丧.我的意思是,我认为我得到它,但"它"不应该是它如何工作,或它应该如何得到.应该有所不同.

我看到的所有示例(甚至是标记模板)都要求"替换"在声明时而不是运行时完成,这对我来说对于模板来说似乎完全没用.也许我很疯狂,但对我来说,一个"模板"是一个包含令牌的文档,当你使用它时,它们会被替换,而不是在你创建它时,否则它只是一个文档(即一个字符串).模板与令牌一起存储为令牌,当您评估它们时,将评估这些令牌.

每个人都引用了一个可怕的例子,类似于:

var a = 'asd';
return `Worthless ${a}!`

这很好,但如果我已经知道a,我会return 'Worthless asd'或者return 'Worthless '+a.重点是什么？认真.好吧,重点是懒惰; 更少的优点,更多的可读性.大.但那不是模板!不是恕我直言.MHO就是最重要的!问题,恕我直言,模板在声明时被评估,所以,如果你这样做,恕我直言:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
go(); // SPACE-TIME ENDS!

由于expletive未声明,因此输出类似的内容My undefined template.超.实际上,至少在Chrome中,我甚至无法声明模板; 它会抛出错误,因为expletive没有定义.我需要的是能够在声明模板后进行替换:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
var expletive = 'great';
go(); // My great template

但是,我不知道这是如何可能的,因为这些不是真正的模板.即使你说我应该使用标签,nope,它们也不起作用:

> explete = function(a,b) { console.log(a); …

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

console.log`1`

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

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

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

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

为什么JavaScript不允许模板字符串作为对象属性键？例如,当我输入:

foo = {`bar`: 'baz'}

在NodeJS REPL中,它会抛出一个SyntaxError带有长堆栈跟踪的"Unexpected模板字符串".但是,属性值很好,这并不是意料之外的.在浏览器中发生类似的错误,例如,Firebug会抛出SyntaxError"无效的属性ID".

"计算属性名称"中允许使用模板字符串.例如,这在所有支持语法的浏览器中编译得非常好:

var foo = {
    [`bar` + 1]: `baz`
};

并创建对象{"bar1": "baz"}.

为什么不允许模板字符串作为文字对象键？是出于性能原因吗？必须在运行时编译模板字符串(如果我错了,请纠正我),这意味着每次遇到此对象时,解释器都必须计算对象名称.考虑到"煮熟的"模板字符串之类的东西,这似乎可能会变慢,尽管我们从ES5开始就有吸气剂和固定器.Firefox没有提到这是一个错误,这就是我发现它意外的原因.将来某个时候会允许语法吗？

我正在使用新的ES6模板文字功能,我头脑中的第一件事是String.format用于Javascript,所以我开始实现原型:

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

但是,模板文字在传递给我的原型方法之前会被评估.有没有什么办法可以编写上面的代码来推迟结果,直到我动态创建元素？

我有一个包含元素列表的数组:

  description: [
    'HTML & CSS',
    'Responsive Design Fundamentals',
    'Javascript object-oriented programming',
    'jQuery',
    'Website Performance Optimization',
    'CRP and RAIL',
    'REST API and Ajax',
    'Javascript Design patterns',
    'Bootsrap Framework',
    'Polymer Web Elements'
  ],

我正在尝试使用模板字符串将此列表附加到HTML元素:

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  <div class="description">
    <ul>
      ${description.map(
        function(work) {
          return `<li>${work}</li>`
        }
      )}</ul>
  </div> …

在GraphQL中,您可以编写类似这样的内容来定义查询:

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

在样式化组件中,您可以像这样定义样式化组件:

const Button = styled.button`
    background-color: papayawhip;
`

这是什么语法？我知道使用模板文字你可以使用这种语法来修改变量:${foo}但是我从未见过使用它.任何指导将不胜感激.

我正在使用ES6模板文字在字符串中构造一些HTML,到目前为止它一直运行良好.但是,只要我尝试将文字文本</script>放在我的字符串中,浏览器就会抛出并抛出语法错误:

SyntaxError: Unterminated template literal

这是一个简单的JavaScript示例,它会抛出错误:

var str=`
<script>
</script>
`
var pre = document.createElement('pre')
pre.textContent = str
document.body.appendChild(pre)

请参阅JS Fiddle中的上述代码.

似乎正在发生的事情是,它放弃了寻找最终文字引用,而是开始将所有内容视为文字HTML,因此在该点之后的所有JavaScript都被错误地视为HTML,而事实并非如此!

如果我更换script通过任何其他法律HTML标签(甚至是无效的标签,如scripty),那么它工作得很好,所以我不能看到这可怎么可能是一个语法错误或怪异的情况下,我认为我已经输入一个字符(如反击)但是却输入了另一个看起来很像它的东西.

我实际上是在创建一个字符串(据我所知,在编译时),浏览器不应该试图将其视为HTML或以任何方式解析它.什么给出了什么？

当使用"use strict"指令时,后退刻度字符在IE11中不被识别为有效字符,而在其他浏览器(如Chrome)中可以使用.

考虑到即使在Windows 10用户中IE11仍然被广泛使用,这种行为的解释是什么？

        "use strict";

        function doIt() {
          let tt;
          tt = 50;
          alert(`${tt}`);
          alert("test");
        }
       doIt();

错误:{"message":"无效字符","文件名":" http://stacksnippets.net/js ","lineno":18,"colno":17}

有没有理由(性能或其他)不对javascript源文件中的所有字符串使用反引号模板文字语法？如果是这样,什么？

我应该更喜欢这个:

var str1 = 'this is a string';

在这？

var str2 = `this is another string`;