天道酬勤,学无止境

template-literals

ES6 模板文字比 eval 更安全吗?(Are ES6 template literals safer than eval?)

问题 模板字面量对我来说有点像 eval,而且经常有人说使用 eval 是个坏主意。 我不关心模板文字的性能,但我关心注入攻击(以及我可能没有想到的其他安全问题)。 编辑 一个让我觉得奇怪的例子 let ii = 1; function counter() { return ii++; } console.log(`${counter()}, ${ii++}, ${counter()}`); 哪些输出 1、2、3 模板文字在全球层面产生了副作用。 既可以通过函数,也可以直接使用。 编辑 2 指示模板文字安全性的示例 let ii = 1; let inc = function() { ii++; } console.log('Starting: ' + ii); let input = prompt('Input something evil (suggestion: inc() or ii++)'); console.log(`You input: ${input}`); console.log('After template literal: ' + ii); eval(input); console.log('After eval: ' + ii); 如果在提示时输入ii++ ,它会记录 开始:1 你输入:ii+=1 模板文字后:1 评估后:2 编辑 3 我已经开始研究

2021-06-24 07:17:46    分类:技术分享    javascript   ecmascript-6   eval   template-literals

当文字包含脚本标签时“未终止的模板文字”语法错误[重复](“Unterminated template literal” syntax error when literal contains script tag [duplicate])

问题 这个问题在这里已经有了答案: 为什么在用 document.write() 编写时将 <script> 标签拆分? (5 个回答) 4年前关闭。 我正在使用 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,事实并非如此! 如果我用任何其他合法的 HTML 标签(甚至是像scripty这样的无效标签)替换script ,那么它就可以正常工作,所以我看不出这可能是语法错误或奇怪的情况,我认为我输入了一个字符(例如反引号),而是输入了另一个看起来几乎相似的内容。 我实际上是在创建一个字符串

2021-06-24 02:49:33    分类:技术分享    javascript   html   ecmascript-6   script-tag   template-literals

如何在 ES6 中嵌套模板字符串?(How to nest template strings in ES6?)

问题 我从 eslint 收到了一个prefer-template错误。 对于解决方法,我将代码更改为在require函数中使用模板字符串,该函数嵌套在url函数中,如下所示: { background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)}) } 然而,这显然是错误的。 这是我之前使用的代码,一个加号连接在require函数而不是模板字符串中。 { background: `url(${require('../../assets/' + edge.node.name.toLowerCase() + '.png')}) center no-repeat` } 是否可以定义嵌套的模板字符串? 回答1 是的,这是可能的,但是您出于某种原因将)})部分(关闭require调用、内插值和 CSS url )放在错误的位置: { background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png`)}) center no-repeat` // ^^^ } 也就是说,这可能是一个坏主意,因为它并不能完全使代码可读。 最好使用一个变量: const bgurl =

2021-06-23 21:29:32    分类:技术分享    javascript   ecmascript-6   template-strings   template-literals

ES6 template literals based on template variable [duplicate]

This question already has answers here: Convert a string to a template string (18 answers) Closed 4 years ago. I try to render a ES6 template literal variable : function render(template, data){ ... } const template = 'resources/${id}/'; console.log(render(template, {id: 1})); // -> resources/1/ Does exist a way to transform a string template with context into a formated string with ES6 template literals feature ?

2021-06-21 16:33:36    分类:问答    javascript   ecmascript-6   template-literals

Combining ES6 unicode literals with ES6 template literals [duplicate]

This question already has an answer here: ES6: Bad character escape sequence creating ASCII string (1 answer) Closed 4 years ago. If I want to print a unicode Chinese character in ES6/ES2015 javascript, I can do this: console.log(`\u{4eb0}`); Likewise, if I want to interpolate a variable into a template string literal, I can do this: let x = "48b0"; console.log(`The character code is ${ x.toUpperCase() }.`); However, it seems that I can't combine the two to print a list of, for example, 40 consecutive unicode Chinese characters. This doesn't work: for (let i = 0, firstCharCode = parseInt("4eb0

2021-06-21 10:47:44    分类:问答    javascript   unicode   ecmascript-6   unicode-escapes   template-literals

visual studio code - syntax highlighting for html strings?

I've been trying to solve this problem for 3 days already but I can't seem to find any extension to have syntax highlighting for strings that used backticks(I don't know what is the general term for this kind of strings). But if there are no extensions to enable syntax highlight for this kind of strings, is there any settings for vscode that enables me to syntax higlight?

2021-06-05 05:29:14    分类:问答    typescript   visual-studio-code   template-literals

Ignore the indentation in a template literal, with the ESLint `indent` rule

The ESLint rule for indent allows for you to specify which nodes are ignored, when determining whether the rule should apply to that node, using the ignoredNodes option. I've got the following code that I want to ignore with this rule: const a = b ? `c${ d }` : e Specifically, the line with d and the subsequent line are reported as having two more spaces than they should. I want to ignore those lines from the rule, but I can't figure out the node that should apply. Node types are specified in this repo. I know that ternary expressions, like used in this code, is a ConditionalExpression node

2021-06-02 01:19:07    分类:问答    javascript   eslint   ternary-operator   lint   template-literals

“Unterminated template literal” syntax error when literal contains script tag [duplicate]

This question already has answers here: Why split the <script> tag when writing it with document.write()? (5 answers) Closed 4 years ago. I'm using ES6 template literals to construct some HTML in strings, and so far it has been working fine. However, as soon as I try to put the literal text </script> in my string the browser throws up and throws the syntax error: SyntaxError: Unterminated template literal Here is a simple JavaScript sample which throws the error: var str=` <script> </script> ` var pre = document.createElement('pre') pre.textContent = str document.body.appendChild(pre) See the

2021-05-18 06:48:50    分类:问答    javascript   html   ecmascript-6   script-tag   template-literals

如何从标签函数调用本机es6模板字符串替换?(How to call native es6 template string replacement from tag function?)

问题 我正在为模板文字编写es6标记函数,该函数首先检查字符串中的条件,如果找不到条件,则仅将模板文字解释为未加标签。 我很好奇,是否可以通过我的标签函数调用浏览器的本机模板文字函数(我认为它将比我自己实现的函数快)。 骨头:这样,就不可能有标签组合的机会,例如htmlEscape(unindent foobar );。 例如。 function dumbTag(strs, ...vals) { vals = vals.map((val,i) => (i % 2 == 0 ? 'even:' : 'odd:')+val); return String.template(strs, ...vals); } 我自己实现的功能-是否有更快的调用浏览器功能的方法? function template(strs, ...vals) { let result = strs[0]; for (let [i,val] of vals.entries()) { result += val; result += strs[i+1]; } return result; } 回答1 为此,您可以(ab)使用String.raw(唯一的内置标签): function doNothingTag() { arguments[0] = { raw: arguments[0] }; return String

2021-05-09 19:55:48    分类:技术分享    javascript   ecmascript-6   variadic-templates   template-literals

Javascript Es6 Tagged Templates - When is raw used? When is cooked used?

After studying this Es6 tag template example: 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); I see what is returned is var yo = func(strings, raw, x, y, x + y); I understand the basics about the string literals and the x y values being inserted. What I don't understand is...when is strings used

2021-05-02 06:32:41    分类:问答    javascript   ecmascript-6   template-literals   tagged-templates