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 str2Rentetan 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 line2Selain 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
< 🎜 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])
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
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')); // truestr.startsWith(searchString[, position])
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')); // flasestr.endsWith(searchString[, position])
let str = 'abcdef'; console.log(str.endsWith('f')); // true console.log(str.endsWith('c', 3)); // true console.log(str.endsWith('c')); // flase
[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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
