Baru-baru ini, saya telah menggunakan string template ES6 dalam proyek saya, yang dirangkum di sini.
1. Sebelumnya kita juga bisa menggunakan JavaScript untuk menghasilkan string template, biasanya sebagai berikut:
$("#result").append(
"Dia adalah <b>"+person.name+"</b>"+"dan kami ingin mengetahui"+person.age+" miliknya. Itu saja"
); Namun kita dapat melihat bahwa pendekatan tradisional ini memerlukan penggunaan banyak "" (tanda kutip ganda) dan + untuk menyatukannya guna mendapatkan templat yang kita perlukan. Tapi ini sangat merepotkan.
Jadi ES6 menyediakan string template, yang ditandai dengan ` (backtick) dan variabel diapit ${}. Contoh di atas dapat ditulis sebagai berikut menggunakan string templat:
$("#result").append(
`Dia adalah <b>${person.name</b>dan kami ingin mengetahui${person.age}-nya.itu saja`
); Pendekatan ini jauh lebih sederhana. Kita tidak perlu lagi menggunakan banyak "" dan + untuk menggabungkan string dan variabel.
2. Tentu saja, variabel dapat dimasukkan ke dalam string templat, dan variabel juga dapat tidak digunakan. Seperti yang ditunjukkan di bawah ini:
` Saya seorang laki-laki.`
` Apa pun yang Anda lakukan,
saya percaya Anda.`
3. Kita juga dapat mendefinisikan variabel terlebih dahulu dan kemudian menyematkan variabel tersebut ke dalam string templat:
var name="zzw";
` ${name}, apa pun yang Anda lakukan,
Saya percaya Anda.` 4. Tentu saja, karena backtick adalah pengidentifikasi string templat, jika kita perlu menggunakan backtick dalam string, kita perlu menghindarinya, sebagai berikut:
`Tidak peduli` apa yang Anda lakukan,
Saya percaya Anda.`
5. Catatan: Jika Anda menggunakan string templat untuk mewakili string multi-baris, semua spasi dan indentasi akan disimpan dalam output! !
console.log( `Tidak peduli` apa yang Anda lakukan, Saya percaya Anda.`);
Outputnya adalah sebagai berikut:
6. Anda bisa memasukkan ekspresi JavaScript apa pun ke dalam tanda kurung kurawal di ${}, melakukan operasi, dan mereferensikan properti objek.
varx=88;
var y=100;
console.log(`x=${++x},y=${x+y}`) ;
7. Yang lebih canggih lagi: string templat juga dapat memanggil fungsi:
function string(){
kembalikan "zzw suka es6!";
}
console.log(`Apa yang ingin Anda katakan? Nah, ${string()}`) ;
Selain itu, jika hasil fungsi bukan string, maka akan diubah menjadi string sesuai aturan umum:
function string(){
kembali 666;
}
console.log(`Apa yang ingin Anda katakan? Nah, ${string()}`) ;
Di sini, angka 666 sebenarnya diubah menjadi string 666.
8. Jika variabel dalam ${} tidak diberi nama, kesalahan akan dilaporkan:
console.log(`Apa yang ingin Anda katakan? Baiklah, ${string( )}`); Dalam kode di atas, fungsi string() tidak dideklarasikan, sehingga kesalahan dilaporkan:
9. Sebenarnya kita juga bisa memasukkan string di ${}, dan hasil pengetahuannya tetap akan mengembalikan string:
console.log(`Apa yang ingin Anda katakan? Nah, ${"Sebenarnya saya bukan variabel ~"}`) ; Hasilnya sebagai berikut:
10. Jika Anda ingin mereferensikan string template itu sendiri, Anda dapat menulisnya seperti ini:
let str="return"+"`Hello! ${name}`";
biarkan func=Fungsi baru("nama",str);
console.log(func("zzw")); Hasilnya adalah sebagai berikut:
