Template Literals ใน Typescript

ใน Typescript เรามี Syntax ใหม่ให้ใช้ครับ คือ ` (อยู่ที่ปุ่มเปลี่ยนภาษา) เอามาแทนที่ single (‘) หรือ double (“) quotes มันมีความสามารถเพิ่มเติมอยู่ 3 อย่าง มาดูกันเลยครับ

การต่อ String

ปกติแล้วเราจะใช้เครื่องหมาย + ในการต่อ String กรณีที่เราต้องการแทรกตัวแปรอะไรสักอย่างใช่ไหมครับ ตัวอย่าง code ด้านล่างนี้

var lyrics = 'Never gonna give you up';
var html = '<div>' + lyrics + '</div>';

ถ้าเราเปลี่ยนมาใช้ template literals จะได้หน้าตาแบบนี้

var lyrics = 'Never gonna give you up';
var html = `<div>${lyrics}</div>`;

จะเห็นว่าเขียนได้เป็นระเบียบขึ้นเยอะเลยครับ

Note : ภายใน ${} จะเป็นการใช้การประมวลผลของ javascript ครับ ดังตัวอย่าง

console.log(`1 and 1 make ${1 + 1}`); // ได้ผลเป็น 1 and 1 make 2

String หลายบรรทัด

ถ้าในเวลาที่เราต้องการจะเขียน string แต่เราจะทำการขึ้นบรรทัดใหม่ภายใน code ของเรา เราจะใช้เครื่องหมาย \ เพื่อให้ตัว compiler รู้ว่าเราจะขึ้นบรรทัดใหม่โดยที่ไม่ต้องทำการประมวลผล ดังนี้

var lyrics = "Never gonna give you up \
\nNever gonna let you down";

แต่ถ้าใช้ template literals ทำได้ดังนี้

var lyrics = `Never gonna give you up
Never gonna let you down`;

เห็นไหมครับสะอาดตาขึ้นเยอะเลย

Tagged Templates

ความเจ๋งของ template literals ยังมีอีกอย่างหนึ่งครับ คือมันสามารถ run function ได้ เราจะเรียกมันว่า tag ดูได้ดังตัวอย่าง

var say = "a bird in hand > two in the bush";
var html = htmlEscape `<div> I would just like to say : ${say}</div>`;

// a sample tag function
function htmlEscape(literals, ...placeholders) {
    let result = "";

    // interleave the literals with the placeholders
    for (let i = 0; i < placeholders.length; i++) {
        result += literals[i];
        result += placeholders[i]
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    // add the last literal
    result += literals[literals.length - 1];
    return result;
} 
// html จะได้ค่าเป็น "<div> I would just like to say : a bird in hand &gt; two in the bush</div>"

จะเห็นว่ามีการใช้ function ที่ทำให้ค่าของ > ใน say เปลี่ยนไปเป็น >

parameter ของ function จะมี 2 ตัวคือ

1.literals คือค่าที่เป็น static ทั้งหมด มีค่าเป็น arrayในที่นี้คือ

["<div> I would just like to say : ", "</div>"]

2.placeholders คือค่าที่อยู่ใน ${} ซึ่งเราควรทำให้มันเป็น array ก่อนโดยการใส่เป็น …placeholders (สามารถอ่านเรื่อง … ได้ที่นี้)จะได้ค่าเป็น

[ "a bird in hand > two in the bush" ]

สรุป

เป็นยังไงบ้างครับกับการใช้งาน template literals จะเห็นได้ว่าการทำงานกับ string ง่ายขึ้นเยอะ และข่าวดีก็คือมันสามารถใช้กับ Javascript ได้ด้วยนะครับ หวังว่าจะช่วยเราชาว dev ทำงานได้สะดวกมาขึ้นนะครับ

ที่มา 1. https://basarat.gitbooks.io/typescript/content/docs/template-strings.html

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals