Vanilla Javascript - #46 Template Strings

25/08/2020

Nesse tutorial trabalharemos com o conceito de Template Strings no Javascript. Os Templates Strings facilitam bastante o manuseio de dados estáticos e dinâmicos.

Templates Strings no Javascript

index.html

Primeiramente criaremos um arquivo html para marcação do nosso site e link do nosso arquivo Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="result" style="white-space: pre;"></div>

    <script src="javascript.js"></script>
</body>
</html>

javascript.js

Para testar as possibilidades de uso dos templates strings vamos rodar o código abaixo no javascript.

(function (win,doc){
    'use strict';

    let a='Thiago';
    let b='Webdesign em Foco';
    let number1=5;
    let number2=10;
    let arr=[0,1,2,'a','b'];

    //console.log(a+' trabalha na '+b);
    //console.log(`${a} trabalha na ${b}`);
    //console.log(`A soma dos números ${number1 + number2}`);
    //doc.querySelector('.result').innerHTML=`${a} trabalha na ${b}`;
    /*doc.querySelector('.result').innerHTML="";
    arr.map((elem,ind,obj)=>{
        doc.querySelector('.result').innerHTML+=`${elem}
    `
    });*/

    function tag(string,...values)
    {
        console.log(`
        ${values[1]} ${string[1]}
        `);
    }
    tag`${a} trabalha na empresa ${b}`;

})(window,document);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor particular? Podemos te ajudar: webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #45 Call, Apply e Bind

Neste tutorial iremos tratar dos métodos manipuladores do this, dentre eles veremos as funções: call, apply e bind.

Vanilla Javascript - #47 Otimizando HTML, CSS e JS

Nesse tutorial vamos aprender uma forma de otimizar nosso html, nosso css e nosso javascript, deixando o código menor e menos exposto.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.