ES2015- Menggunakan String Template

String template adalah fitur ES2015, yang dapat diimplementasikan menggunakan TypeScript.

String template berguna untuk membuat template dengan variasi teks dan variable. Untuk membuat template digunakan tanda ` atau backtick. Terdapat disebelah kiri angka 1.

Untuk melakukan passing variable atau kondisi tertentu, digunakan tanda ${}.

Berikut contoh penggunaan string template. Buka file app.ts, lalu tambahkan code berikut

var container = document.getElementById("container");

var todo = {
    id: 1,
    xname: "Budi",
    completed: true
}

var displayName = `Todo #${todo.id}`;

Hasil compile dalam javascript akan seperti berikut:

var container = document.getElementById("container");
var todo = {
    id: 1,
    xname: "Budi",
    completed: true
};
var displayName = "Todo #".concat(todo.id);

String template cukup sering digunakan pada aplikasi sehari-hari saat render html element. Berikut contohnya

var container = document.getElementById("container");
var todo = {
    id: 1,
    xname: "Budi",
    completed: true
};

container.innerHTML = `
<div todo='${todo.id}' class="list-group-item">
    <i class="${todo.completed ? "" : "hidden"} text-success gplyphicon-ok"></i>
    <span class="name">${todo.xname}</span>
`;

Dapat dilihat pada contoh diatas, selain passing variable, kita juga bisa passing kondisi.

Berikut hasil kompilasinya:

var container = document.getElementById("container");
var todo = {
    id: 1,
    xname: "Budi",
    completed: true
};
container.innerHTML = "\n<div todo='".concat(todo.id, "' class=\"list-group-item\">\n    <i class=\"").concat(todo.completed ? "" : "hidden", " text-success gplyphicon-ok\"></i>\n    <span class=\"name\">").concat(todo.xname, "</span>\n");