Penggunaan khusus rentetan templat dalam ES6

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript Ia terutamanya memperkenalkan penggunaan rentetan templat dalam ES6 Ia terutamanya menganalisis kandungan rentetan templat berdasarkan kod lihat, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Terbaru digunakan dalam projek Rentetan templat ES6 diringkaskan di sini.

1. Sebelum ini kita juga boleh menggunakan JavaScript untuk mengeluarkan rentetan templat, biasanya seperti berikut:

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

Tetapi kita dapat melihat bahawa pendekatan tradisional ini memerlukan penggunaan banyak "" ( petikan berganda) dan sambung bersama untuk mendapatkan templat yang kami perlukan. Tetapi ini sangat menyusahkan.

Jadi ES6 menyediakan rentetan templat, ditandai dengan ` (tanda belakang) dan pembolehubah yang disertakan dengan ${}. Contoh di atas boleh ditulis seperti berikut menggunakan rentetan templat:

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

Pendekatan ini lebih mudah, dan kita tidak perlu lagi menggunakan sejumlah besar "" dan untuk menyambung rentetan dan pembolehubah.

2 Sudah tentu, pembolehubah boleh dimasukkan ke dalam rentetan templat, dan ia juga mungkin untuk tidak menggunakan pembolehubah. Seperti yang ditunjukkan di bawah:

` Saya seorang lelaki.`

` Tidak kira apa yang anda lakukan,

Saya percayakan awak.` 　　

3. Kita juga boleh mentakrifkan pembolehubah terlebih dahulu dan kemudian membenamkan pembolehubah dalam rentetan templat:

var name="zzw";
` ${name},no matter what you do,
 I trust you.`

4 Jelas sekali, kerana tanda belakang ialah pengecam rentetan templat, jika kita perlu Bila menggunakan kutu belakang, kita perlu melarikan diri, seperti yang ditunjukkan di bawah:

`Tidak kira` apa yang anda lakukan,
Saya percayakan anda.`

5 : Jika anda menggunakan rentetan templat untuk mewakili rentetan berbilang baris, semua ruang dan inden akan disimpan dalam output! !

console.log( `No matter\` what you do,
 I trust you.`);

Hasil output adalah seperti berikut:

6 Anda boleh meletakkan sebarang ungkapan JavaScript dalam kurungan kerinting dalam ${} dan anda juga boleh Melakukan operasi dan sifat objek rujukan.

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

Hasilnya adalah seperti berikut:

7 Apa yang lebih hebat ialah: rentetan templat juga boleh memanggil fungsi:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯，${string()}`);

Hasilnya adalah seperti berikut:

Selain itu, jika hasil fungsi bukan rentetan, ia akan ditukar menjadi rentetan mengikut peraturan am:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯，${string()}`);

Hasilnya adalah seperti berikut:

Di sini, nombor 666 sebenarnya ditukar kepada rentetan 666.

8 Jika dalam $ Jika pembolehubah dalam {} tidak dinamakan, ralat akan dilaporkan:

console.log(`你想说什么? 嗯，${string()}`);

Dalam kod di atas, fungsi string() tidak diisytiharkan, jadi ralat akan dilaporkan:

9 Malah, kita juga boleh memasukkan rentetan dalam ${} dan hasil pengetahuan masih akan mengembalikan rentetan:

console.log(`你想说什么?嗯，${"其实我不是变量~"}`);

Hasilnya adalah seperti berikut:

10 Jika anda ingin memetik rentetan templat itu sendiri, anda boleh menulisnya seperti ini:

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

<.>Hasilnya adalah seperti berikut:

[Cadangan berkaitan:

tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Penggunaan khusus rentetan templat dalam ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!