freeCodeCamp

3.7 KiB

Raw Blame History

id	title	localeTitle	challengeType
587d7b8a367417b2b2512b4e	Create Strings using Template Literals	Crear cadenas usando literales de plantilla	1

Description

Una nueva característica de ES6 es la plantilla literal . Este es un tipo especial de cadena que facilita la creación de cadenas complejas. Los literales de plantilla le permiten crear cadenas de varias líneas y usar las funciones de interpolación de cadenas para crear cadenas. Considera el siguiente código:

const person = {
name: "Zodiac Hasbro",
age: 56
};

// Template literal with multi-line and string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); // prints
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.

Muchas cosas pasaron allí. En primer lugar, el ejemplo utiliza comillas ( ` ), no comillas ( ' o " ), para envolver la cadena. En segundo lugar, observe que la cadena es multilínea, tanto en el código como en la salida. Esto ahorra la inserción de \n en La sintaxis ${variable} utilizada anteriormente es un marcador de posición. Básicamente, no tendrá que usar más la concatenación con el operador + . Para agregar variables a las cadenas, simplemente suelte la variable en una cadena de plantilla y la envuelva con ${ y } . De forma similar, puede incluir otras expresiones en su cadena literal, por ejemplo, ${a + b} . Esta nueva forma de crear cadenas le brinda más flexibilidad para crear cadenas sólidas.

Instructions

Use la sintaxis literal de la plantilla con comillas invertidas para mostrar cada entrada de la matriz de failure del objeto de result . Cada entrada debe incluirse dentro de un elemento li con el atributo de clase text-warning , y debe aparecer dentro de resultDisplayArray .

Tests

tests:
  - text: <code>resultDisplayArray</code> es una matriz que contiene mensajes de <code>result failure</code> .
    testString: 'assert(typeof makeList(result.failure) === "object" && resultDisplayArray.length === 3, "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.");'
  - text: <code>resultDisplayArray</code> es el resultado deseado.
    testString: 'assert(makeList(result.failure).every((v, i) => v === `<li class="text-warning">${result.failure[i]}</li>` || v === `<li class="text-warning">${result.failure[i]}</li>`), "<code>resultDisplayArray</code> is the desired output.");'
  - text: Se utilizaron cadenas de plantilla.
    testString: 'getUserInput => assert(getUserInput("index").match(/`.*`/g), "Template strings were not used");'

Challenge Seed

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

  // change code below this line
  const resultDisplayArray = null;
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ `<li class="text-warning">no-var</li>`,
 *   `<li class="text-warning">var-on-top</li>`,
 *   `<li class="text-warning">linebreak</li>` ]
 **/
const resultDisplayArray = makeList(result.failure);

Solution

// solution required

3.7 KiB Raw Blame History