Aparentemente, todas as linguagens têm um aprimoramento de string de modelo e, no JavaScript, escrevemos o nosso próprio para permitir um desenvolvimento mais contínuo sem a necessidade de concatenar tudo. Alguns desses auxiliares de modelo permitem até mesmo looping, iteração e suporte condicional. As implementações nativas sempre começam pequenas, mas estou animado com os literais de modelo em JavaScript!


O JavaScript


O formato do modelo é muito simples: backticks(`) em vez de aspas simples ou duplas, e um $ para o envolvimento de interpolação:



// Basic interpolation
var name="David";
console.log(`Hi, my name is ${name}`); // Hi, my name is David

// Math :)
var one = 1;
var two = 2;
console.log(`Your total is: ${one+two}`); // Your total is: 3

// More math
console.log(`Another total is: ${one + two * 2}`); // Another total is: 5

// Object properties
var obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3


O senhor também pode usar strings de modelo para aceitação básica de novas linhas:



var myString = `Hello

I'm a new line`; // No error!


O recurso de string de modelo JavaScript é uma boa adição e estará disponível primeiro no Firefox. Esse recurso de string de modelo não é inovador, mas é um bom aprimoramento e algo há muito esperado, mesmo que seja apenas para strings de várias linhas.

  • 5 maneiras de interação entre CSS e JavaScript que talvez o senhor não conheça
  • Demonstrações favoritas do Chris Coyier’s CodePen

    David me perguntou se eu gostaria de fazer um guest post escolhendo algumas das minhas canetas favoritas do CodePen. É uma tarefa difícil! São tantas! Mas consegui escolher algumas que me surpreenderam nos últimos meses. Se o senhor…