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



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


ในบทที่ ๓ ได้เขียนถึงการสร้างสายอักขระขึ้นโดยใช้เครื่องหมายคำพูดแบบเดี่ยว ('...') หรือแบบคู่ ("...") คร่อม
ใน 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

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

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

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

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



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

  ค้นหาบทความ

  บทความแนะนำ

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

ไทย

日本語

中文