φυβλαςのβλογ
phyblas的博客



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


ในบทที่ ๓ ได้เขียนถึงการสร้างสายอักขระขึ้นโดยใช้เครื่องหมายคำพูดแบบเดี่ยว ('...') หรือแบบคู่ ("...") คร่อม
ใน 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
-- manim
-- opencv
-- pyqt
-- pytorch
机器学习
-- 神经网络
javascript
蒙古语
语言学
maya
概率论
与日本相关的日记
与中国相关的日记
-- 与北京相关的日记
-- 与香港相关的日记
-- 与澳门相关的日记
与台湾相关的日记
与北欧相关的日记
与其他国家相关的日记
qiita
其他日志

按类别分日志



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

  查看日志

  推荐日志

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