链接:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals
问题:< br >使用带反斜杠的模板文字语法创建列表元素(li)字符串数组。每个列表元素的文本应该是result对象的failure属性中的数组元素之一,并且有一个值为text-warning的class属性。makeList函数应该返回列表项字符串的数组。
使用迭代器方法(任何类型的循环)来获取所需的输出
[
'<li class="text-warning">no-var</li>',
'<li class="text-warning">var-on-top</li>',
'<li class="text-warning">linebreak</li>'
]
>
未传递:failuresList应该是包含结果失败消息的数组。
通过:failuresList应等于指定的输出。
通过:应使用模板字符串和表达式插值。
已通过:应使用迭代器。
以下是我到目前为止的代码:
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
"use strict";
// Only change code below this line
const resultDisplayArray = (arr) =>{
let failure = [];
for (let element of arr) {
failure.push(`<li class="text-warning">${element}</li>`);
}
return failure;
};
// Only change code above this line
return resultDisplayArray(arr);
}
const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray);
因此,我将以两种方式参考这些问题:如何修复您的代码,并提出一种干净的方法来解决问题。
js lang-js prettyprint-override">const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
// Only change code below this line
const failureItems = arr.map(curr => `<li class="text-warning">${curr}</li>`);
// Only change code above this line
return failureItems;
}
const failuresList = makeList(result.failure);
console.log(failuresList);
这里最好使用map
方法。
js prettyprint-override">const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
// Only change code below this line
const failureItems = result.failure.map(element => `<li class="text-warning">${element}</li>`);
// Only change code above this line
return failureItems;
}
const failuresList = makeList(result.failure);
您不需要 makeList
函数中额外的 resultDisplayArray
函数。只需遍历数组!
function makeList(arr) {
// Only change code below this line
const failureItems = [];
for (let element of arr) {
failureItems.push(`<li class="text-warning">${element}</li>`);
}
// Only change code above this line
return failureItems;
}
ES6引入了一种通过反引号( ` )标记的新的字符串文字类型。 这些字符串文字可以包括换行符,并且有一个新的机制用于将变量插入字符串:
问题内容: 我有以下Ecma-Script-6代码 输出如下: 和 我已经能够在此处将字符串串联起来,那么使用模板文字的情形将是什么? 问题答案: 如果像问题示例中那样仅将模板文字与占位符(例如)一起使用,则结果与串联字符串相同。从主观上讲,它看起来更好并且更易于阅读,尤其是对于多行字符串或包含这两者的字符串,因为您不必再转义那些字符了。 可读性是一个很棒的功能,但是关于模板最有趣的是Tagg
我有以下ECMAScript 6模板文字的代码: 输出如下所示: 这是小提琴。 我试图寻找确切的区别,但我找不到,以下两种说法有什么区别? 和 我已经能够在这里获得与< code>person.name连接的字符串< code>MyVar,那么在什么场景中使用模板文字呢?
问题内容: 在ES6中使用字符串连接或模板文字时,HTML代码生成在现代浏览器中运行的速度是否可测得更快? 例如: 字符串串联 模板文字 问题答案: 目前看来,字符串连接速度更快:http : //jsperf.com/es6-string-literals-vs-string-concatenation 我测试过的是在#enable-javascript-harmony启用了该标志的V4 4.3
本文向大家介绍深入浅出es6模板字符串,包括了深入浅出es6模板字符串的使用技巧和注意事项,需要的朋友参考一下 本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下 作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子 有时候还要给标签加一些属性,写起来很不方便,es6提供了模板字符串的方法,简化了这一过程 所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换
主要内容:1.多行字符串,2.字符串插值,3.标记模板,4.原始字符串,5.String.fromCodePoint()模板文字是ECMAScript 2015/ES6中引入的新功能。它提供了创建多行字符串和执行字符串插值的简便方法。模板文字是字符串文字,并允许嵌入表达式。 在ES6之前,模板文字被称为模板字符串。 与字符串中的引号不同,模板文字用反引号()字符(QWERTY键盘中ESC键下方的键)括起来。 模板文字可以包含占位符,由美元符号和大括号表示。在反引号内,如果要使用表达式,则可以将该