ECMAScript 6 hadir dengan tipe baru string literal, menggunakan backtick sebagai pembatas. Literal ini memang memungkinkan ekspresi interpolasi string dasar untuk tertanam, yang kemudian secara otomatis diuraikan dan dievaluasi.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Seperti yang Anda lihat, kami menggunakan `serangkaian karakter, yang ditafsirkan sebagai string literal, tetapi setiap ekspresi bentuk ${..}diuraikan dan dievaluasi dengan segera.
Satu manfaat yang sangat bagus dari literal string yang diinterpolasikan adalah mereka diizinkan untuk dipecah menjadi beberapa baris:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
Ekspresi Interpolasi
Ekspresi valid apa pun diizinkan muncul di ${..}dalam string literal yang diinterpolasi, termasuk panggilan fungsi, panggilan ekspresi fungsi inline, dan bahkan literal string yang diinterpolasi lainnya!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
Di sini, `${who}s`string literal interpolasi bagian dalam adalah kenyamanan sedikit lebih baik bagi kita ketika menggabungkan whovariabel dengan "s"string, sebagai lawan dari who + "s". Juga untuk menyimpan catatan adalah string literal yang diinterpolasi hanya dibatasi secara leksikal di mana ia muncul, tidak secara dinamis dicakup dengan cara apa pun:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
Menggunakan templat literal untuk HTML jelas lebih mudah dibaca dengan mengurangi gangguan.
Cara biasa yang sederhana:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Dengan ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- String Anda dapat menjangkau beberapa baris.
- Anda tidak harus lari dari karakter kutipan.
- Anda dapat menghindari pengelompokan seperti: '">'
- Anda tidak harus menggunakan operator plus.
Literal Templat Tagged
Kami juga dapat menandai string template, ketika string template ditandai, literal dan substitusi dilewatkan ke fungsi yang mengembalikan nilai yang dihasilkan.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Kita dapat menggunakan operator spread di sini untuk memberikan beberapa nilai. Argumen pertama — kami menyebutnya string — adalah array dari semua string polos (hal-hal di antara setiap ekspresi yang diinterpolasi).
Kami kemudian mengumpulkan semua argumen berikutnya ke dalam array disebut nilai-nilai menggunakan ... gather/rest operator, meskipun Anda tentu saja telah meninggalkan mereka sebagai parameter bernama individu mengikuti string parameter seperti yang kami lakukan di atas ( value1, value2, dll).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Argumen yang dikumpulkan ke dalam array nilai kami adalah hasil dari ekspresi interpolasi yang sudah dievaluasi yang ditemukan dalam string literal. Literal string yang ditandai adalah seperti langkah pemrosesan setelah interpolasi dievaluasi, tetapi sebelum nilai string akhir dikompilasi, memungkinkan Anda lebih mengontrol menghasilkan string dari literal. Mari kita lihat contoh membuat templat yang dapat digunakan kembali.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
String mentah
Fungsi tag kami menerima argumen pertama yang kami sebut string, yang merupakan array. Tapi ada sedikit tambahan data yang disertakan: versi mentah dari semua string yang belum diproses. Anda dapat mengakses nilai-nilai string mentah menggunakan .rawproperti, seperti ini:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Seperti yang Anda lihat, versi mentah dari string mempertahankan \nurutan yang diloloskan , sementara versi yang diproses dari string memperlakukannya seperti baris baru nyata yang tidak terhindar . ECMAScript 6 dilengkapi dengan built-in fungsi yang dapat digunakan sebagai tag literal string yang: String.raw(..). Ini hanya melewati versi mentah dari string:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"