Tagged Template Literals & ES6 Template Literals/ ES6 Template Strings

[xgqfrms]

Tagged Template Literals & ES6 Template Literals/ ES6 Template Strings

ES6 Template Strings & Tags

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright
 * @description Tagged Template Literals &  ES6 Template Literals/ ES6 Template Strings
 * @augments
 * @example
 * @param {*} strings
 * @param {*} name
 * @param {*} age
 *
 */

const highlight = (strings, name, age) => {
    return `
        <div>
            <p>
                ${strings[0]}: <span style="color: #0f0; background: #000;">${name}</span>,
                ${strings[1]}: <span style="color: #0f0; background: #000;">${age}</span>,
                ${strings[2]}.
            </p>
        </div>
    `;
};

let name = "xgqfrms",
    age = 23,
    sentence = highlight`My name is ${name} and ${age} years old.`;
console.log(sentence);

const body = document.querySelector("body");
body.innerHTML = "";
body.insertAdjacentHTML("beforeend", sentence);

[xgqfrms]

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright  xgqfrms
 * @description Tagged Template Literals &  ES6 Template Literals/ ES6 Template Strings
 * @augments ES6 Template Strings & Tags
 * @example ...
 * @param {*} strings
 * @param {*} name
 * @param {*} age
 * @reference https://wesbos.com/tagged-template-literals/
 *
 */

const highlight = (strings, name, age) => {
    return `
        <div>
            <p>
                ${strings[0]}: <span style="color: #0f0; background: #000;">${name}</span>,
                ${strings[1]}: <span style="color: #0f0; background: #000;">${age}</span>,
                ${strings[2]}.
            </p>
        </div>
    `;
};

let name = "xgqfrms",
    age = 23,
    sentence = highlight`My name is ${name} and ${age} years old.`;
console.log(sentence);

const body = document.querySelector("body");
body.innerHTML = "";
body.insertAdjacentHTML("beforeend", sentence);