String di JavaScript secara historis terbatas, tidak memiliki kemampuan yang mungkin diharapkan dari bahasa seperti Python atau Ruby. Template String ES6 (tersedia di Chrome 41+), mengubahnya secara mendasar. Mereka memperkenalkan cara menentukan string dengan bahasa khusus domain (DSL), sehingga menghasilkan:
- Interpolasi string
- Ekspresi tersemat
- String multiline tanpa trik
- Pemformatan string
- Pemberian tag string untuk pelepasan HTML yang aman, pelokalan, dan lainnya.
Daripada memasukkan fitur lain ke dalam String seperti yang kita ketahui saat ini, String Template memperkenalkan cara yang sama sekali berbeda untuk menyelesaikan masalah ini.
Sintaksis
String Template menggunakan tanda petik terbalik (``) dan bukan tanda kutip tunggal atau ganda yang biasa kita gunakan dengan string reguler. Dengan demikian, string template dapat ditulis sebagai berikut:
var greeting = `Yo World!`;
Sejauh ini, String Template tidak memberikan apa pun selain string normal. Mari kita ubah.
Substitusi String
Salah satu manfaat nyata pertama mereka adalah penggantian string. Substitusi memungkinkan kita mengambil ekspresi JavaScript yang valid (termasuk penambahan variabel) dan di dalam Template Literal, hasilnya akan ditampilkan sebagai bagian dari string yang sama.
String Template dapat berisi placeholder untuk substitusi string menggunakan sintaksis ${ }, seperti yang ditunjukkan di bawah:
// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);
// => "Yo, Brendan!"
Karena semua penggantian string dalam String Template adalah ekspresi JavaScript, kita dapat mengganti lebih banyak hal daripada nama variabel. Misalnya, di bawah ini kita dapat menggunakan interpolasi ekspresi untuk menyematkan beberapa matematika inline yang mudah dibaca:
var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);
//=> JavaScript first appeared 20 years ago. Wow!
console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.
Fungsi ini juga sangat berguna untuk fungsi di dalam ekspresi:
function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.
${} berfungsi dengan baik dengan semua jenis ekspresi, termasuk ekspresi anggota dan panggilan metode:
var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);
// => "Thanks for getting this into V8, CAITLIN POTTER";
// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);
// => Say hello to template strings
Jika Anda memerlukan tanda petik terbalik di dalam string, tanda petik tersebut dapat di-escape menggunakan karakter garis miring terbalik \ sebagai berikut:
var greeting = `\`Yo\` World!`;
String Multiline
String multiline di JavaScript telah memerlukan solusi yang rumit selama beberapa waktu. Solusi saat ini untuknya mengharuskan string berada dalam satu baris atau dibagi menjadi string multiline menggunakan \ (backslash) sebelum setiap baris baru. Contoh:
var greeting = "Yo \
World";
Meskipun ini akan berfungsi dengan baik di sebagian besar mesin JavaScript modern, perilaku itu sendiri masih merupakan sedikit peretasan. Orang juga dapat menggunakan penggabungan string untuk memalsukan dukungan multiline, tetapi hal ini sama-sama tidak memuaskan:
var greeting = "Yo " +
"World";
String Template menyederhanakan string multiline secara signifikan. Cukup sertakan baris baru di tempat yang diperlukan dan BOOM. Berikut contohnya:
Setiap spasi di dalam sintaksis tanda petik terbalik juga akan dianggap sebagai bagian dari string.
console.log(`string text line 1
string text line 2`);
Template yang Diberi Tag
Sejauh ini, kita telah mempelajari penggunaan String Template untuk penggantian string dan untuk membuat string multiline. Fitur canggih lainnya yang mereka bawa adalah template yang diberi tag. Template Bertag mengubah String Template dengan menempatkan nama fungsi sebelum string template. Contoh:
fn`Hello ${you}! You're looking ${adjective} today!`
Semantik string template yang diberi tag sangat berbeda dengan string template normal. Pada dasarnya, ini adalah jenis panggilan fungsi khusus: "desugars" di atas menjadi
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
Perhatikan bagaimana argumen ke-(n + 1) sesuai dengan penggantian yang terjadi antara entri ke-n dan ke-(n + 1) dalam array string. Hal ini dapat berguna untuk berbagai hal, tetapi salah satu yang paling mudah adalah pelepasan otomatis variabel yang diinterpolasi.
Misalnya, Anda dapat menulis fungsi escaping HTML sehingga..
html`<p title="${title}">Hello ${you}!</p>`
menampilkan string dengan variabel yang sesuai diganti, tetapi dengan semua karakter yang tidak aman untuk HTML diganti. Mari kita lakukan. Fungsi penghindaran HTML kita akan menggunakan dua argumen: nama pengguna dan komentar. Keduanya dapat berisi karakter yang tidak aman untuk HTML (yaitu ', ", <, >, dan &). Misalnya, jika nama pengguna adalah "Domenic Denicola" dan komentar adalah "& adalah tag yang menyenangkan", kita harus menampilkan:
<b>Domenic Denicola says:</b> "& is a fun tag"
Oleh karena itu, solusi template yang diberi tag dapat ditulis sebagai berikut:
// HTML Escape helper utility
var util = (function () {
// Thanks to Andrea Giammarchi
var
reEscape = /[&<>'"]/g,
reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
oEscape = {
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
},
oUnescape = {
'&': '&',
'&': '&',
'<': '<',
'<': '<',
'>': '>',
'>': '>',
''': "'",
''': "'",
'"': '"',
'"': '"'
},
fnEscape = function (m) {
return oEscape[m];
},
fnUnescape = function (m) {
return oUnescape[m];
},
replace = String.prototype.replace
;
return (Object.freeze || Object)({
escape: function escape(s) {
return replace.call(s, reEscape, fnEscape);
},
unescape: function unescape(s) {
return replace.call(s, reUnescape, fnUnescape);
}
});
}());
// Tagged template function
function html(pieces) {
var result = pieces[0];
var substitutions = [].slice.call(arguments, 1);
for (var i = 0; i < substitutions.length; ++i) {
result += util.escape(substitutions[i]) + pieces[i + 1];
}
return result;
}
var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "& is a fun tag"
Penggunaan lain yang mungkin termasuk pelepasan otomatis, pemformatan, pelokalan, dan secara umum, penggantian yang lebih kompleks:
// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;
// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`
// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)
// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;
Ringkasan
String Template ada di Chrome 41 beta+, IE Tech Preview, Firefox 35+, dan io.js. Secara praktis, jika Anda ingin menggunakannya dalam produksi saat ini, fitur ini didukung di Transpiler ES6 utama, termasuk Traceur dan 6to5. Lihat contoh Template String kami di repo contoh Chrome jika Anda ingin mencobanya. Anda mungkin juga tertarik dengan ES6 Equivalents in ES5, yang menunjukkan cara mendapatkan beberapa string Template yang disederhanakan menggunakan ES5 saat ini.
String Template menghadirkan banyak kemampuan penting ke JavaScript. Hal ini mencakup cara yang lebih baik untuk melakukan interpolasi string & ekspresi, string multiline, dan kemampuan untuk membuat DSL Anda sendiri.
Salah satu fitur paling signifikan yang mereka bawa adalah template yang diberi tag - fitur penting untuk membuat DSL tersebut. Fungsi ini menerima bagian String Template sebagai argumen dan Anda kemudian dapat memutuskan cara menggunakan string dan penggantian untuk menentukan output akhir string Anda.