ES6 buat masa ini: rentetan templat

literasi templat ES6: Pendekatan moden untuk tali javascript

sorotan utama:

ES6 (ECMAScript 2015) dengan ketara meningkatkan JavaScript, memperkenalkan ciri -ciri penting untuk pembangunan web moden.
literals templat, menggunakan backticks (`) sebagai pembatas, merevolusikan pengendalian rentetan dalam JavaScript. Mereka membolehkan ekspresi tertanam dan rentetan multiline.
Fungsi tag boleh disiapkan ke templat literal, yang membolehkan pemprosesan tersuai (mis., Pengekodan URL) dari rentetan yang dihasilkan.
Walaupun disokong secara meluas oleh pelayar moden, ES6 boleh dipindahkan ke ES5 untuk pelayar yang lebih tua. Pengesanan ciri memastikan keserasian.

(artikel ini adalah sebahagian daripada siri pembangunan Web Microsoft. Terima kasih kepada rakan kongsi kami untuk menyokong SitePoint.)

ES6 adalah masa kini dan masa depan JavaScript. Siri ini meneroka ciri -ciri yang paling berguna. Gaya pengekodan saya secara konsisten menggunakan petikan tunggal untuk rentetan, menawarkan kelebihan dalam pembinaan rentetan HTML:

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

Mengelakkan watak melarikan diri meningkatkan kebolehbacaan. Walaupun HTML adalah fleksibel, mengutamakan kod yang boleh dibaca manusia adalah kunci. Saya telah belajar dari pengalaman masa lalu dengan kerumitan DHTML untuk menghargai penyelesaian yang bersih.

Penggantian ekspresi dan kebolehbacaan yang dipertingkatkan:

Keutamaan saya untuk petikan tunggal berpunca dari latar belakang PHP saya, di mana mereka menghalang penggantian berubah -ubah, meningkatkan prestasi. JavaScript sebelum ini tidak mempunyai ciri ini, memerlukan penyambungan rentetan:

var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound); 

Ini menjadi rumit dengan rentetan yang lebih panjang dan sering menyebabkan kesilapan. Kekurangan rentetan multiline asli JavaScript semakin merumitkan perkara.

literals templat: Penyelesaian:

literasi templat ES6 menyelesaikan masalah ini. Backtick (`) membolehkan penggantian ekspresi dan rentetan multiline:

var animal = 'cow';
var sound = 'moo';

alert(`The animal is ${animal} and its sound is ${sound}`);

Membina mengendalikan sebarang ungkapan JavaScript, membolehkan pengiraan dan akses harta benda objek: ${}

var output = `ten times two is ${10 * 2}`;

rentetan multiline kini tidak mudah:

var list = `
- Buy Milk
- Be kind to Pandas
- Forget about Dre
`;

templat tagged:

literals templat boleh "ditandai" dengan fungsi, membolehkan manipulasi rentetan tersuai:

function urlify(str) {
  return encodeURIComponent(str);
}

urlify`http://example.com`;

Fungsi ini menerima rentetan sebagai hujah, yang membolehkan operasi seperti pengekodan URL.

mengakses bahagian rentetan dalam fungsi tag: Fungsi tag menerima kedua -dua bahagian rentetan dan ekspresi tertanam sebagai argumen berasingan:

Harta menyediakan bahagian rentetan mentah, termasuk urutan melarikan diri.

function tag(strings, values) {
  console.log(strings); // Array of string parts
  console.log(values);  // Array of embedded expressions
}

tag`you ${3 + 4} it`;

strings.raw keserasian penyemak imbas dan pengesanan ciri:

Walaupun kebanyakan pelayar moden menyokong literasi templat, transpilasi ES6 (mis., Menggunakan Babel) diperlukan untuk penyemak imbas yang lebih tua. Pengesanan ciri memastikan keserasian:

// Single quotes simplify HTML attribute quoting
var buttonText = 'Save'; 

Bacaan dan sumber selanjutnya: (pautan yang ditinggalkan untuk keringkasan, tetapi teks asal termasuk pautan ke pelbagai artikel mengenai literal template.)

Siri Pembangunan Web Microsoft Web:

(butiran mengenai sumber pembangunan web Microsoft, termasuk alat dan bahan pembelajaran, dimasukkan ke dalam teks asal tetapi ditinggalkan di sini untuk keringkasan.)

Soalan -soalan yang sering ditanya:

(teks asal mengandungi bahagian FAQ yang komprehensif mengenai literals templat, yang ditinggalkan di sini kerana kekangan panjang.)

Atas ialah kandungan terperinci ES6 buat masa ini: rentetan templat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!