Backticks เรียกใช้ฟังก์ชัน

ฉันไม่แน่ใจว่าจะอธิบายเรื่องนี้อย่างไร แต่เมื่อฉันวิ่ง

console.log`1`

ใน Google Chrome ฉันได้รับผลลัพธ์เช่น

console.log`1`
VM12380:2 ["1", raw: Array[1]]

ทำไม backtick เรียกฟังก์ชั่นบันทึกและมันเป็นเหตุผลที่ทำให้ดัชนีของraw: Array[1]?

คำถามถูกนำขึ้นมาในห้อง JS โดย Catgocat แต่ไม่มีคำตอบใดที่สมเหตุสมผลนอกจากบางสิ่งเกี่ยวกับการสร้างเทมเพลตสตริงที่ไม่เหมาะสมจริงๆว่าทำไมสิ่งนี้จึงเกิดขึ้น

มันถูกเรียกว่า Tagged แม่แบบใน ES-6 เพิ่มเติมสามารถอ่านเกี่ยวกับพวกเขาที่นี่ , ตลกผมพบว่าการเชื่อมโยงในส่วนที่ติดดาวของการแชทมาก

แต่ส่วนที่เกี่ยวข้องของโค้ดอยู่ด้านล่าง (โดยทั่วไปคุณสามารถสร้างการจัดเรียงที่กรองได้)

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

โดยพื้นฐานแล้วมันเป็นเพียงการแท็ก "1" ด้วยฟังก์ชัน console.log เช่นเดียวกับฟังก์ชันอื่น ฟังก์ชันการติดแท็กยอมรับค่าที่แยกวิเคราะห์ของสตริงเทมเพลตและค่าแยกกันซึ่งสามารถดำเนินการต่อไปได้

Babel ถ่ายทอดรหัสด้านบนไปที่

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

ดังที่คุณเห็นในตัวอย่างด้านบนหลังจากที่ babel ถูกถ่ายทอดแล้วฟังก์ชันการแท็ก (console.log) จะถูกส่งผ่านค่าส่งคืนของโค้ด es6-> 5 ที่แสดงต่อไปนี้

_taggedTemplateLiteralLoose( ["1"], ["1"] );

ค่าส่งกลับของฟังก์ชันนี้จะถูกส่งไปยัง console.log ซึ่งจะพิมพ์อาร์เรย์

แท็กเทมเพลตลิเทอรัล:

ไวยากรณ์ต่อไปนี้:

function`your template ${foo}`;

เรียกว่าเทมเพลตลิเทอรัลที่ติดแท็ก

ฟังก์ชันที่เรียกว่าเป็นเท็มเพลตที่ติดแท็กได้รับอาร์กิวเมนต์ในลักษณะต่อไปนี้:

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

1. อาร์กิวเมนต์แรกคืออาร์เรย์ของอักขระสตริงแต่ละตัว
2. อาร์กิวเมนต์ที่เหลือสอดคล้องกับค่าของตัวแปรที่เราได้รับผ่านการแก้ไขสตริง สังเกตในตัวอย่างว่าไม่มีค่าสำหรับarg4(เนื่องจากมีการแก้ไขสตริงเพียง 3 ครั้ง) จึงundefinedถูกบันทึกเมื่อเราพยายามเข้าสู่ระบบarg4

การใช้ไวยากรณ์พารามิเตอร์ที่เหลือ:

หากเราไม่ทราบล่วงหน้าว่าจะมีการแก้ไขสตริงกี่ครั้งในสตริงเทมเพลตก็มักจะมีประโยชน์ในการใช้ไวยากรณ์พารามิเตอร์ที่เหลือ ไวยากรณ์นี้เก็บอาร์กิวเมนต์ที่เหลือซึ่งฟังก์ชันได้รับในอาร์เรย์ ตัวอย่างเช่น:

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;