การใช้ Template Literals

1. ความเข้าใจเกี่ยวกับ Template Literals

Template Literals เป็นฟีเจอร์ของ JavaScript ที่ช่วยให้เราสามารถสร้างข้อความ (String) แบบ Dynamic ได้ง่ายขึ้นโดยการใช้เครื่องหมาย backtick (`</code>) แทนเครื่องหมายคำพูด (<code>'</code> หรือ <code>"</code>)</p> <ul class="wp-block-list"> <li>สามารถฝังตัวแปรหรือ Expressions ลงในข้อความได้โดยใช้ <strong><code>${expression}</code></strong></li> <li>มีประโยชน์ในการเขียนโค้ดที่ต้องรวมข้อความกับตัวแปรหรือค่าที่คำนวณได้</li> </ul> <p><strong>ตัวอย่างพื้นฐาน</strong>:</p>  <pre class="language-javascript"><code class="language-javascript">const name = 'John'; const message = `Hello, ${name}!`; console.log(message); // Output: Hello, John!</code></pre> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h4 class="wp-block-heading">2. การใช้ Template Literals ใน <code>x-text</code></h4> <h5 class="wp-block-heading">ตัวอย่างพื้นฐาน:</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ name: 'John', age: 25 }"> &lt;h1 x-text="`Name: ${name}, Age: ${age}`">&lt;/h1> &lt;/div></code></pre> <p><strong>คำอธิบาย</strong>:</p> <ul class="wp-block-list"> <li><code>x-text</code> ใช้ Template Literals เพื่อสร้างข้อความ Dynamic</li> <li>ข้อความที่แสดงใน <code>&lt;h1></code> คือ <code>Name: John, Age: 25</code></li> </ul> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h4 class="wp-block-heading">3. การใช้ Template Literals ใน <code>:class</code></h4> <h5 class="wp-block-heading">ตัวอย่าง: การเปลี่ยนคลาสตามค่าจาก State</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ isActive: true }"> &lt;button :class="`btn ${isActive ? 'btn-active' : 'btn-inactive'}`"> Toggle &lt;/button> &lt;/div></code></pre> <p><strong>คำอธิบาย</strong>:</p> <ul class="wp-block-list"> <li>ถ้า <code>isActive</code> เป็น <code>true</code>, ปุ่มจะมีคลาส <code>btn btn-active</code></li> <li>ถ้า <code>isActive</code> เป็น <code>false</code>, ปุ่มจะมีคลาส <code>btn btn-inactive</code></li> </ul> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h4 class="wp-block-heading">4. การใช้ Template Literals ใน <code>:style</code></h4> <h5 class="wp-block-heading">ตัวอย่าง: การปรับแต่งสไตล์แบบ Dynamic</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ color: 'red', fontSize: '16px' }"> &lt;p :style="`color: ${color}; font-size: ${fontSize}`">Dynamic Style&lt;/p> &lt;button @click="color = 'blue'; fontSize = '20px'">Change Style&lt;/button> &lt;/div></code></pre> <p><strong>คำอธิบาย</strong>:</p> <ul class="wp-block-list"> <li>ข้อความใน <code>&lt;p></code> จะเปลี่ยนสีและขนาดฟอนต์ตามค่าของ <code>color</code> และ <code>fontSize</code></li> <li>เมื่อคลิกปุ่ม สีจะเปลี่ยนเป็น <code>blue</code> และฟอนต์จะเปลี่ยนเป็น <code>20px</code></li> </ul> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h4 class="wp-block-heading">5. การประยุกต์ใช้ในสถานการณ์ต่าง ๆ</h4> <h5 class="wp-block-heading">ตัวอย่าง: การสร้างลิงก์แบบ Dynamic</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ username: 'johndoe' }"> &lt;a :href="`https://example.com/user/${username}`" x-text="`Visit ${username}'s Profile`">&lt;/a> &lt;/div></code></pre> <p><strong>คำอธิบาย</strong>:</p> <ul class="wp-block-list"> <li>ลิงก์ <code>href</code> จะถูกสร้างแบบ Dynamic เป็น <code>https://example.com/user/johndoe</code></li> <li>ข้อความที่แสดงใน <code>&lt;a></code> คือ <code>Visit johndoe's Profile</code></li> </ul> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h4 class="wp-block-heading">6. การใช้ Template Literals กับ Array และ Object</h4> <h5 class="wp-block-heading">ตัวอย่าง: วนลูปแสดงข้อความจาก Array</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }"> &lt;ul> &lt;li x-for="(item, index) in items" x-text="`${index + 1}: ${item}`">&lt;/li> &lt;/ul> &lt;/div></code></pre> <p><strong>คำอธิบาย</strong>:</p> <ul class="wp-block-list"> <li><code>x-for</code> ใช้ Template Literals เพื่อแสดงรายการแบบมีลำดับ</li> <li>ข้อความที่แสดงใน <code>&lt;li></code>: <code>1: Apple 2: Banana 3: Cherry</code></li> </ul> <h5 class="wp-block-heading">ตัวอย่าง: แสดงค่าจาก Object</h5>  <pre class="language-php"><code class="language-php">&lt;div x-data="{ user: { name: 'John', age: 25 } }"> &lt;h1 x-text="`Name: ${user.name}, Age: ${user.age}`"></h1> </div>

คำอธิบาย:

ข้อความที่แสดงใน <h1> คือ Name: John, Age: 25

7. ข้อดีของการใช้ Template Literals

โค้ดกระชับและอ่านง่าย: ลดการใช้เครื่องหมายบวก (+) ในการต่อข้อความ
รองรับค่าที่ซับซ้อน: ใช้ได้กับ Array, Object, หรือผลลัพธ์จาก Expression
Dynamic มากขึ้น: เหมาะกับการสร้างข้อความที่ต้องเปลี่ยนแปลงบ่อย

8. ข้อควรระวัง

การประมวลผล: Template Literals ใน Alpine.js จะประมวลผลทุกครั้งที่ State เปลี่ยน อาจมีผลต่อประสิทธิภาพหากใช้มากเกินไป
ความปลอดภัย: หากค่ามาจากแหล่งภายนอก (เช่น API) ควรตรวจสอบและป้องกันการแทรกโค้ดที่ไม่ปลอดภัย (XSS)

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีใช้ Template Literals ใน x-text, :class, และ :style เพื่อสร้างค่าที่ Dynamic และยืดหยุ่น ในบทถัดไป เราจะพูดถึงการแสดงและซ่อนองค์ประกอบแบบ Dynamic ด้วยคำสั่ง x-show!