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

三十二

~ 自己紹介 ~

目次

日本による名言集

python モジュール -- numpy -- matplotlib -- pandas -- manim -- opencv -- pyqt -- pytorch 機械学習 -- ニューラル      ネットワーク

javascript

モンゴル語

言語学

maya

確率論

日本での日記

中国での日記 -- 北京での日記 -- 香港での日記 -- 澳門での日記

台灣での日記

北欧での日記

他の国での日記

qiita

その他の記事

記事の類別

==เลือกหมวด== ดาราศาสตร์ คณิตศาสตร์ -ความน่าจะเป็น คอมพิวเตอร์ -เขียนโปรแกรม --python ---numpy ---scipy ---matplotlib ---pandas ---manim ---pyqt ---sklearn ---pytorch ---mayapython --ruby --javascript --dart --MATLAB --SQL --regex --opencv -shell -3D --maya --MMD -microsoft_office -pdf -ปัญญาประดิษฐ์ --โครงข่ายประสาทเทียม --สเตเบิลดิฟฟิวชัน ---comfyui -การสุ่ม ภาษาศาสตร์ -ตัวอักษร -เรียนภาษา -หลักเกณฑ์การทับศัพท์ -ภาษาจีน --ภาษาจีนกลาง -ภาษาญี่ปุ่น -ภาษามองโกล -ภาษาลาว -ภาษาเขมร ประวัติศาสตร์ -ประวัติศาสตร์จีน -ประวัติศาสตร์ญี่ปุ่น ปรัชญา ประเทศจีน -จีนแผ่นดินใหญ่ --ปักกิ่ง --เทียนจิน --เหลียวหนิง --เหอเป่ย์ --เหอหนาน --ซานตง --ซานซี --อานฮุย --เจ้อเจียง --หูเป่ย์ --หูหนาน --ฝูเจี้ยน --กวางตุ้ง ---แต้จิ๋ว --ยูนนาน --ซินเจียง -ฮ่องกง -มาเก๊า -ไต้หวัน --ไทเป --จีหลง --เถาหยวน --ซินจู๋ --เหมียวลี่ --ไถจง --จางฮว่า --หยวินหลิน --เจียอี้ --ไถหนาน --เกาสยง --ผิงตง --อี๋หลาน ประเทศญี่ปุ่น -ฮกไกโด -อาโอโมริ -อิวาเตะ -มิยางิ -อากิตะ -ยามางาตะ -ฟุกุชิมะ -อิบารากิ -โทจิงิ -กุมมะ -ไซตามะ -จิบะ -โตเกียว -คานางาวะ -นีงาตะ -โทยามะ -อิชิกาวะ -ฟุกุอิ -ยามานาชิ -นางาโนะ -กิฟุ -ชิซึโอกะ -ไอจิ -มิเอะ -ชิงะ -เกียวโต -โอซากะ -เฮียวโงะ -นาระ -วากายามะ -โอกายามะ -ฮิโรชิมะ -ยามางุจิ -ฟุกุโอกะ -ซางะ -นางาซากิ -คุมาโมโตะ -โออิตะ ต่างแดน -อุษาคเนย์ --กัมพูชา --พม่า --สิงคโปร์ -ยุโรป --สวีเดน --เดนมาร์ก --ฟินแลนด์ -ออสเตรเลีย ท่องเที่ยว -มหาวิทยาลัย -พิพิธภัณฑ์ --พิพิธภัณฑ์วิทยาศาสตร์ --หอศิลป์ -สวนสัตว์ --พิพิธภัณฑ์สัตว์น้ำ -ท้องฟ้าจำลอง -ตึกระฟ้า -ปราสาท☑ --ปราสาทญี่ปุ่น --ปราสาทขอม --ปราสาทยุโรป -ศาสนสถาน --วัด --ศาลเจ้า --โบสถ์ --มัสยิด -สุสาน -มรดกโลก -ทะเล -ทะเลสาบ -ภูเขา -หิมะ -ดอกซากุระ -แมว -รถไฟ -เรือ -ตลาดกลางคืน -งานเทศกาล -ที่ระลึกภัยพิบัติ -ตามรอย บันเทิง -เกม --อาเตอลีเย --โปเกมอน --caligula --vn -อนิเมะ -มังงะ -นิยาย -เพลง --เพลงอนิเมะ --เพลงเกม เรื่องแต่ง บันทึก

　 記事を検索

　 最新記事

　 おすすめの記事

月別記事

もっと前の記事

ไทย

日本語

中文