φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๓๒: การสร้างสายอักขระหลายบรรทัดและการใช้แม่แบบ
เขียนเมื่อ 2020/01/31 20:20


ในบทที่ ๓ ได้เขียนถึงการสร้างสายอักขระขึ้นโดยใช้เครื่องหมายคำพูดแบบเดี่ยว ('...') หรือแบบคู่ ("...") คร่อม
ใน ES6 มีวิธีใหม่เพิ่มมา นั่นคือใช้ ` ` (เรียกว่า "เครื่องหมายคำพูดกลับหลัง" (backquote) หรือ grave accent)

ในบทนี้จะพูดถึงการสร้างสายอักขระด้วยวิธีใหม่นี้




การสร้างสายอักขระหลายบรรทัด

ปกติทั้ง '' และ "" จะใช้คร่อมข้อความได้เพียงบรรทัดเดียวเท่านั้น ถ้าจะขึ้นบรรทัดใหม่ต้องแทนด้วย \n หรือถ้าจะยกข้อความลงไปเขียนต่อในบรรทัดใหม่ก็ใช้ \ แต่ก็ไม่ได้ทำให้เกิดการขึ้นบรรทัดใหม่จริงๆในสายอักขระ ต้องเติม \n ไปด้วย กลายเป็น \n\ เช่น
let neuaphleng = 'โรยรินกลิ่นแก้วแผ้วโพ้ยโชยมา\n\
ชื่นในอุรา\n\
หอมดอกแก้วพารำพึง';

แต่เมื่อใช้ ` ` คร่อมแทน จะสามารถขึ้นบรรทัดใหม่ได้ และบรรทัดใหม่ที่ขึ้นนั้นก็แทนการขึ้นบรรทัดใหม่ในสายอักขระจริงๆ

ตัวอย่าง

let neuaphleng = `เพ้อครวญหวลคลั่ง
ถึงคราครั้งหนึ่ง
ถึงคืนนั้นซึ่ง
ผูกพันตราตรึง
ซึ้งอยู่ในฤทัย`;

นอกจากนี้ยังสามารถใช้ ' " ได้โดยไม่ต้องใช้ \ เพื่อทำการเอสเคป แต่ในทางกลับกัน ต้องใช้ \ กับ ` แทน
alert(`~ ' ~ " ~ \` ~`); // ได้ ~ ' ~ " ~ ` ~




การแทรกค่าตัวแปรลงไปในสายอักขระที่สร้างด้วย ``

นอกจาก ` ` จะทำให้สร้างสายอักขระหลายบรรทัดได้ง่ายแล้ว ยังมีความสามารถในการแทรกตัวแปรลงไปได้ง่ายด้วย โดยการเขียน ${ค่าหรือตัวแปร} แทรกไว้ข้างใน ` `

ตัวอย่าง
let x = 17, y = 323;
let s = `${x} + ${y} = ${x+y}`;
alert(s); // ได้ 17 + 323 = 340

ถ้าเขียนแบบไม่ได้ใช้ ` ` จะต้องเขียนโดยใช้การบวกต่อแบบนี้ เมื่อเทียบกันดูแล้วอาจรุงรังกว่า
let s = x + " + " + y + " = " + (x+y);

ภายใน ${ } จะใส่ค่าหรือนิพจน์อะไรลงไปโดยตรงไม่ใช่ตัวแปรก็ได้
let s = `${7} + ${8} ${"เท่ากับ"} ${7+8}`;
alert(s); // ได้ 7 + 8 เท่ากับ 15




การสร้างแม่แบบสายอักขระ

ประโยชน์ของการใช้ ` ` อีกอย่างก็คือสามารถใช้ในรูปแม่แบบ (template) ได้

วิธีใช้ก็คือสร้างฟังก์ชันสำหรับทำเป็นแม่แบบขึ้นมา แล้วก็เอาชื่อฟังก์ชันแม่แบบนั้นไปวางไว้ข้างหน้า ` `

ตัวอย่าง
let khun = function (c, s1, s2) {
  return "~" + c[0] + "คุณ" + s1 + "... " + c[1] + "คุณ" + s2 + "... " + c[2] + "~";
}

let zhang = "จาง", wang = "หวาง";
let thak = khun`สวัสดี ${zhang}แล้วก็${wang} เป็นไงบ้าง`;
alert(thak); // ได้ ~สวัสดี คุณจาง... แล้วก็คุณหวาง...  เป็นไงบ้าง~

ฟังก์ชันที่จะใช้เป็นแม่แบบจะรับพารามิเตอร์ตัวแรก (ในที่นี้คืือ c) เป็นแถวลำดับของข้อความที่อยู่นอก ${ } โดยมีส่วนของ ${ } เป็นตัวแบ่ง

ส่วนพารามิเตอร์ตัวถัดจากนั้นไป (ในที่นี้คือ s1, s2) จะแทนค่าที่ถูกใส่ใน ${ } ทีละตัว ตามลำดับ

ถ้าต้องการให้ไม่จำกัดจำนวนของตัวที่แทรกใน ${ } อาจใช้ ... เพื่อทำเป็นแถวลำดับของตัวทั้งหมดที่ใส่เข้ามา
let khun = function (c, ...s) {
  return "~" + c[0] + "คุณ" + s[0] + "... " + c[1] + "คุณ" + s[1] + "... " + c[2] + "~";
}

let luo = "หลัว", cui = "ชุย";
let thak = khun`สวัสดี ${luo}กับ${cui} แล้วเจอกันใหม่`;
alert(thak); // ได้ ~สวัสดี คุณหลัว... กับคุณชุย...  แล้วเจอกันใหม่~

พอใช้ ... ทำเป็นแถวลำดับแบบนี้แล้วอาศัยการวนซ้ำด้วย for หรือ while ก็จะทำอะไรได้ยืดหยุ่นขึ้น เช่นเขียนแบบนี้
let khun = function (c, ...s) {
  let ss = "~" + c[0];
  let n = s.length, i = 0;
  while (i < n) {
    ss += "คุณ" + s[i] + c[i + 1];
    i++;
  }
  ss += "~";
  return ss;
}

let chen = "เฉิน", wen = "เวิน", zhan = "จาน", liu = "หลิว";

let thak = khun`อ้าว ${chen}กับ${wen}แล้วก็${zhan} มาทำไร`;
alert(thak); // ได้ ~อ้าว คุณเฉินกับคุณเวินแล้วก็คุณจาน มาทำไร~;

thak = khun`นั่น${chen}, ${wen}, ${zhan} แล้วก็${liu}`;
alert(thak); // ได้ ~นั่นคุณเฉิน, คุณเวิน, คุณจาน แล้วก็คุณหลิว~;

ตัวอย่างใช้งานอีกอย่างเช่นลองทำแม่แบบสำหรับเอสเคปโค้ดใน html
// ฟังก์ชันสำหรับแทนที่ตัวเอสเคปในโค้ด html
let esc = (s) => {
  s = s.replace(/&/g, "&amp;");
  s = s.replace(/</g, "&lt;");
  s = s.replace(/>/g, "&gt;");
  s = s.replace(/"/g, "&quot;");
  return s.replace(/'/g, "&#39;");
}

// ฟังก์ชันสำหรับใช้เป็นแม่แบบเพื่อเอสเคป html
let escapeHtml = (c, ...ss) => {
  let html = c[0], n = ss.length, i = 0;
  while (i < n) {
    html += esc(ss[i]) + c[i + 1];
    i++;
  }
  return html;
}

// ลองใช้
let chue1 = "<HoH>", chue2 = "&'ToT'";
alert(escapeHtml`@ ${chue1} @ ${chue2} @`); // ได้ @ &lt;HoH&gt; @ &amp;&#39;ToT&#39; @





-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

ไม่อนุญาตให้นำเนื้อหาของบทความไปลงที่อื่นโดยไม่ได้ขออนุญาตโดยเด็ดขาด หากต้องการนำบางส่วนไปลงสามารถทำได้โดยต้องไม่ใช่การก๊อปแปะแต่ให้เปลี่ยนคำพูดเป็นของตัวเอง หรือไม่ก็เขียนในลักษณะการยกข้อความอ้างอิง และไม่ว่ากรณีไหนก็ตาม ต้องให้เครดิตพร้อมใส่ลิงก์ของทุกบทความที่มีการใช้เนื้อหาเสมอ

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
python
-- numpy
-- matplotlib

-- pandas
-- pytorch
maya
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
javascript
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
เรียนภาษาจีน
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
หลักการเขียนทับศัพท์ภาษาจีนกวางตุ้ง
การใช้ unix shell เบื้องต้น ใน linux และ mac
หลักการเขียนทับศัพท์ภาษาจีนกลาง
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
บันทึกการเที่ยวสวีเดน 1-12 พ.ค. 2014
แนะนำองค์การวิจัยและพัฒนาการสำรวจอวกาศญี่ปุ่น (JAXA)
เล่าประสบการณ์ค่ายอบรมวิชาการทางดาราศาสตร์โดยโซวเคนได 10 - 16 พ.ย. 2013
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
บันทึกการเที่ยวญี่ปุ่นครั้งแรกในชีวิต - ทุกอย่างเริ่มต้นที่สนามบินนานาชาติคันไซ
หลักการเขียนทับศัพท์ภาษาญี่ปุ่น
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ
ทำไมถึงอยากมาเรียนต่อนอก
เหตุผลอะไรที่ต้องใช้ภาษาวิบัติ?

บทความแต่ละเดือน

2020年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2019年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2018年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2017年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2016年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

ค้นบทความเก่ากว่านั้น

ไทย

日本語

中文