freeCodeCamp/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7b8a367417b2b2512b4e	Creare stringhe usando i modelli letterali	1	301200	create-strings-using-template-literals

--description--

Una nuova caratteristica di ES6 è il modello letterale. Questo è un tipo speciale di stringa che facilita la creazione di stringhe complesse.

I modelli letterali consentono di creare stringhe multi-linea e di utilizzare le funzioni di interpolazione di stringhe per crearne altre.

Considera il codice qui sotto:

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

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting);

La console mostrerà le stringhe Hello, my name is Zodiac Hasbro! e I am 56 years old..

Sono accadute un sacco di cose qui! In primo luogo, l'esempio utilizza l'apice inverso, detto backtick (`), non le virgolette (' o "), per racchiudere la stringa. In secondo luogo, nota che la stringa è multi-riga, sia nel codice che nell'output. Questo ci risparmia l'inserimento di \n all'interno delle stringhe. La sintassi ${variable} utilizzata sopra è un segnaposto. Fondamentalmente, non dovrai più usare la concatenazione con l'operatore +. Per aggiungere variabili alle stringhe, basta mettere la variabile in una stringa modello e avvolgerla con ${ e }. Allo stesso modo, puoi includere altre espressioni nella tua stringa letterale, ad esempio ${a + b}. Questo nuovo modo di creare stringhe ti dà più flessibilità per creare stringhe affidabili.

--instructions--

Usa la sintassi dei modelli letterali con l'apice inverso per creare un array di stringhe di elementi di lista (li). Il testo di ogni elemento della lista dovrebbe essere uno degli elementi dell'array dalla proprietà failure dell'oggetto result e avere un attributo class con il valore text-warning. La funzione makeList dovrebbe restituire l'array delle stringhe degli elementi della lista.

Utilizza un metodo iteratore (qualsiasi tipo di ciclo) per ottenere l'output desiderato (mostrato di seguito).

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

--hints--

failuresList dovrebbe essere un array contenente messaggi result failure.

assert(
  typeof makeList(result.failure) === 'object' && failuresList.length === 3
);

failuresList dovrebbe essere uguale all'output specificato.

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>`
  )
);

Dovresti usare modelli di stringhe e interpolazione di espressioni.

(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));

Dovresti usare un iteratore.

(getUserInput) =>
  assert(getUserInput('index').match(/for|map|reduce|forEach|while/));

--seed--

--seed-contents--

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 = [];
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);

--solutions--

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) {
  return arr.map(val => `<li class="text-warning">${val}</li>`);
}

const failuresList = makeList(result.failure);