freeCodeCamp

3.8 KiB

Raw Blame History

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

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 utilizar las funciones de interpolación de cadenas para crear cadenas. Considere el siguiente código:

const persona = {
nombre: "Zodiac Hasbro",
edad: 56
};

// Plantilla literal con multilínea y interpolación de cadenas.
saludo de const = `Hola, mi nombre es $ {person.name}!
Tengo $ {person.age} años`;

console.log (saludo); // impresiones
// ¡Hola, mi nombre es Zodiac Hasbro!
// Tengo 56 an ~ os.

Muchas cosas sucedieron allí. En primer lugar, el ejemplo utiliza comillas invertidas ( ` ), 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 evita la inserción de \n dentro de las cadenas. 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, solo debe colocar la variable en una cadena de plantilla y envolverla con ${ y } De manera 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 robustas.

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.8 KiB Raw Blame History