Apakah rentetan templat javascript

Rentetan templat ialah rentetan baru yang diperkenalkan dalam ES6 yang membenarkan ungkapan terbenam Ia adalah versi rentetan yang dipertingkatkan Ia menggunakan tanda belakang untuk menggantikan aksara berganda dalam rentetan biasa. Dengan menggunakan literal templat, anda boleh menggunakan petikan tunggal dan berganda dalam rentetan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Templat literal ialah rentetan literal yang membenarkan ungkapan terbenam Ia adalah rentetan literal baharu yang diperkenalkan dalam ES6. Anda boleh menggunakan rentetan berbilang baris dan fungsi interpolasi rentetan. Ia dipanggil "rentetan templat" dalam versi sebelumnya bagi spesifikasi ES2015.

Rentetan templat menggunakan tanda belakang (` `) dan bukannya petikan berganda dan petikan tunggal dalam rentetan biasa. Rentetan templat boleh mengandungi ruang letak untuk sintaks tertentu (${expression}). Ungkapan dalam pemegang tempat dan teks di sekeliling dihantar bersama kepada fungsi lalai, yang bertanggungjawab untuk menggabungkan semua bahagian Jika rentetan templat bermula dengan ungkapan, rentetan itu dipanggil Rentetan templat bertanda, ungkapan ini biasanya merupakan fungsi , yang akan dipanggil selepas rentetan templat diproses Anda boleh menggunakan fungsi ini untuk mengendalikan rentetan templat sebelum mengeluarkan hasil akhir. Apabila menggunakan tanda belakang (`) dalam rentetan templat, anda perlu menambah aksara melarikan diri () di hadapannya.

`\`` === "`" // --> true

Rentetan templat boleh digunakan sebagai rentetan biasa, juga boleh digunakan untuk mentakrif rentetan berbilang baris atau membenamkan pembolehubah dalam rentetan.

Penggunaan biasa adalah seperti berikut:

// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

Rentetan templat berbilang baris

Perbezaan antara rentetan templat yang disediakan oleh ECMAScript 2015 dan rentetan biasa Perbezaannya ialah ruang, inden dan baris baharu dalam rentetan templat akan dikekalkan.

Kod sampel adalah seperti berikut:

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1 Rentetan templat dengan ungkapan

Rentetan templat menyokong ungkapan terbenam dan struktur sintaks adalah seperti berikut:

`${expression}`

Kod sampel adalah seperti berikut:

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

Rentetan templat berteg

Fungsi rentetan templat, Bukan hanya di atas. Ia boleh mengikut nama fungsi yang akan dipanggil untuk memproses rentetan templat ini. Ini dipanggil ciri templat berteg.

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

Templat teg sebenarnya bukan templat, tetapi bentuk panggilan fungsi khas. "Label" merujuk kepada fungsi, dan rentetan templat serta-merta mengikutinya ialah parameternya.

Rentetan asal

Dalam parameter pertama fungsi teg, terdapat atribut khas mentah, yang melaluinya anda boleh mengakses rentetan asal rentetan templat , sebaliknya daripada aksara yang diganti khas.

Kod sampel adalah seperti berikut:

/*
  原始字符串 应用在带标签的模板字符串中
  * 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
  * 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
  console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2

Selain itu, menggunakan kaedah String.raw() untuk mendapatkan rentetan asal kekunci fungsi adalah sama seperti fungsi templat lalai dan penciptaan gabungan rentetan.

Kod sampel adalah seperti berikut:

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!

Tentukan sama ada rentetan disertakan

1 termasuk() kaedah

includes() digunakan untuk menentukan sama ada rentetan disertakan dalam rentetan lain dan mengembalikan benar atau salah berdasarkan hasil penentuan.

Struktur sintaks adalah seperti berikut:

str.includes(searchString[, position])

Perihalan parameter:

• searchString: Rentetan yang hendak dicari dalam rentetan ini.

• kedudukan: (pilihan) Kedudukan indeks rentetan semasa untuk mula mencari subrentetan Nilai lalai ialah 0.

Perlu diambil perhatian bahawa kaedah includes() adalah sensitif huruf besar-besaran.

Kod sampel adalah seperti berikut:

let str = 'abcdef';
console.log(str.includes('c')); // true
console.log(str.includes('d')); // true
console.log(str.includes('z')); // false
console.log(str.includes('A')); // false

Kaedah termasuk() yang disediakan oleh ECMAScript 2015 adalah sensitif huruf besar-besaran Kini kami melanjutkan kod tidak sensitif huruf besar-besaran sendiri,

Kod sampel adalah seperti berikut:

String.prototype.MyIncludes = function (searchStr, index = 0) {
  // 将需要判断的字符串全部改成小写形式
  let str = this.toLowerCase()
  // 将传入的字符串改成小写形式
  searchStr = searchStr.toLowerCase();
  return str.includes(searchStr, index)
}
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true

2 kaedah startsWith()

startsWith() kaedah digunakan untuk menentukan sama ada rentetan semasa bermula dengan subrentetan lain yang diberikan pada permulaan. , dan mengembalikan benar atau salah mengikut keputusan penghakiman.

Struktur sintaks adalah seperti berikut:

str.startsWith(searchString[, position])

Perihalan parameter:

• searchString: Rentetan yang hendak dicari dalam rentetan ini.

• kedudukan: (pilihan) Kedudukan indeks rentetan semasa untuk mula mencari subrentetan Nilai lalai ialah 0.

Perlu diperhatikan bahawa kaedah startsWith() adalah sensitif huruf besar-besaran.

Kod sampel adalah seperti berikut:

let str = 'abcdef';
/*
  * startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
  * str.startsWith(searchString[, position])
    参数说明
      searchString: 要在此字符串中搜索的字符串。 
      position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
  !值得注意的是startsWith() 方法是区分大小写的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase

3 kaedah endsWith()

endsWith() digunakan untuk menentukan sama ada rentetan semasa adalah berdasarkan yang lain. diberikan "akhir" subrentetan, mengembalikan benar atau salah mengikut keputusan penghakiman.

Struktur sintaks adalah seperti berikut:

str.endsWith(searchString[, position])

Perihalan parameter:

• searchString: Rentetan yang hendak dicari dalam rentetan ini.

• kedudukan: (pilihan) Kedudukan indeks rentetan semasa untuk mula mencari subrentetan Nilai lalai ialah 0.

Perlu diperhatikan bahawa kaedah endsWith() adalah sensitif huruf besar-besaran.

Kod sampel adalah seperti berikut:

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

Dua kaedah berikut boleh digunakan untuk melanjutkan kaedah yang tidak peka huruf besar-besaran.

[Cadangan berkaitan: Tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Apakah rentetan templat javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!