ECMAScript 6 เกิดขึ้นกับสตริงตัวอักษรชนิดใหม่โดยใช้ backtick เป็นตัวคั่น ตัวอักษรเหล่านี้อนุญาตให้มีการฝังนิพจน์การแก้ไขสตริงพื้นฐานซึ่งจะถูกวิเคราะห์และประเมินโดยอัตโนมัติ
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
อย่างที่คุณเห็นเราใช้`ชุดอักขระรอบตัวซึ่งถูกตีความว่าเป็นตัวอักษรสตริง แต่นิพจน์ใด ๆ ของฟอร์ม${..}จะถูกวิเคราะห์และประเมินผลแบบอินไลน์ทันที
ข้อดีอย่างหนึ่งที่ดีจริงๆของตัวอักษรสตริงที่ถูกแก้ไขคืออนุญาตให้แบ่งได้หลายบรรทัด:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
นิพจน์ที่สอดแทรก
การแสดงออกที่ถูกต้องใด ๆ ที่ได้รับอนุญาตให้ปรากฏในภายใน${..}ตัวอักษรของสตริงการแก้ไขรวมถึงการเรียกใช้ฟังก์ชั่นการเรียกการแสดงออกของฟังก์ชั่นแบบอินไลน์และแม้กระทั่งตัวอักษรสตริงการแก้ไขอื่น ๆ !
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
ที่นี่ภายใน`${who}s`ตัวอักษรสตริงหยันเป็นความสะดวกสบายที่ดีกว่านิด ๆ หน่อย ๆ สำหรับเราเมื่อรวมwhoตัวแปรกับสตริงเมื่อเทียบกับ"s" who + "s"นอกจากนี้เพื่อเก็บบันทึกเป็นตัวอักษรสตริง interpolated เป็นเพียงการกำหนดขอบเขตที่มันปรากฏไม่ขอบเขตแบบไดนามิกในทางใด ๆ :
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
การใช้เทมเพลตตัวอักษรสำหรับ HTML นั้นสามารถอ่านได้ง่ายขึ้นโดยลดความน่ารำคาญ
วิธีเก่าแบบธรรมดา:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ด้วย ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- สตริงของคุณสามารถขยายได้หลายบรรทัด
- คุณไม่จำเป็นต้องหลีกเลี่ยงอักขระคำพูด
- คุณสามารถหลีกเลี่ยงการจัดกลุ่มเช่น: '">'
- คุณไม่จำเป็นต้องใช้ตัวดำเนินการบวก
เทมเพลตตัวอักษรที่ติดแท็ก
นอกจากนี้เรายังสามารถติดแท็กสตริงแม่แบบเมื่อมีการติดแท็กสตริงแม่แบบตัวอักษรและการแทนที่จะถูกส่งผ่านไปยังฟังก์ชันที่ส่งคืนค่าผลลัพธ์
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
เราสามารถใช้โอเปอเรเตอร์การแพร่กระจายที่นี่เพื่อส่งผ่านค่าหลายค่า อาร์กิวเมนต์แรก - เราเรียกมันว่าสตริง - คืออาร์เรย์ของสตริงธรรมดาทั้งหมด (สิ่งของระหว่างนิพจน์ใด ๆ
จากนั้นเราจะรวบรวมข้อโต้แย้งที่ตามมาทั้งหมดลงในอาร์เรย์ค่าเรียกใช้... gather/rest operatorแต่คุณสามารถเรียนได้ปล่อยให้เป็นพารามิเตอร์ชื่อบุคคลดังต่อไปนี้สตริงพารามิเตอร์เหมือนที่เราทำข้างต้น ( value1, value2ฯลฯ )
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
อาร์กิวเมนต์ที่รวบรวมในอาร์เรย์ค่าของเราคือผลลัพธ์ของนิพจน์การแก้ไขที่ประเมินแล้วที่พบในสตริงตัวอักษร สตริงตัวอักษรที่ติดแท็กเหมือนกับขั้นตอนการประมวลผลหลังจากการประมาณค่าถูกแก้ไข แต่ก่อนรวบรวมค่าสตริงสุดท้ายทำให้คุณสามารถควบคุมการสร้างสตริงจากตัวอักษรได้มากขึ้น ลองดูตัวอย่างของการสร้างแม่แบบที่ใช้ซ้ำได้
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
สตริงดิบ
ฟังก์ชั่นแท็กของเราได้รับการโต้แย้งครั้งแรกที่เราเรียกว่าสตริงซึ่งเป็นอาร์เรย์ แต่ก็มีข้อมูลอีกเล็กน้อยรวมถึงเวอร์ชั่นที่ยังไม่ได้ประมวลผลของสตริงทั้งหมด คุณสามารถเข้าถึงค่าสตริงดิบได้โดยใช้.rawคุณสมบัติเช่นนี้
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
อย่างที่คุณเห็นรุ่น raw ของสตริงรักษา\nลำดับescaped ในขณะที่รุ่นที่ประมวลผลของสตริงปฏิบัติกับมันเหมือนบรรทัดใหม่จริง unescaped ECMAScript 6 String.raw(..)มาพร้อมกับฟังก์ชั่นที่สามารถนำมาใช้เป็นตัวอักษรแท็กสตริง: มันเพียงแค่ผ่านรุ่น raw ของสตริง:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"