การใช้งาน String substring ในภาษา Next.js แบบง่ายๆ

Next.js เป็น Framework ที่พื้นฐานบน JavaScript ทำให้เราสามารถใช้ฟังก์ชันมาตรฐานจาก JavaScript ได้โดยตรง เป็นที่รู้จักดีในเรื่องการทำงานกับเว็บแอปพลิเคชันที่รวดเร็วและมีประสิทธิภาพ และแน่นอนว่าหนึ่งในฟังก์ชันที่มีความสำคัญมากใน JavaScript คือการจัดการกับสตริง (String) นั่นเอง

ในบทความนี้เรา จะมาพูดถึงฟังก์ชัน `substring()` ซึ่งใช้สำหรับตัดส่วนหนึ่งของสตริงในภาษา JavaScript และภาษาที่ใช้ร่วมกับ Next.js โดยจะมีตัวอย่างโค้ดและใช้กรณีการใช้งานที่เกิดขึ้นจริงเพื่อให้เห็นภาพชัดเจนยิ่งขึ้น ถ้าพร้อมแล้ว มาเริ่มกันเลย!

ความเข้าใจเบื้องต้นเกี่ยวกับฟังก์ชัน substring()

ฟังก์ชัน `substring()` ใน JavaScript จะทำการคืนค่าสตริงที่ตัดตอนมาจากสตริงต้นฉบับ โดยเราสามารถระบุค่าพารามิเตอร์ได้สองค่า ได้แก่:

- `start` (ตำแหน่งเริ่มต้น)

- `end` (ตำแหน่งสิ้นสุด)

ฟังก์ชันจะคืนค่าสตริงทั้งหมดที่อยู่ระหว่างตำแหน่งเริ่มต้นและสิ้นสุด แต่ไม่รวมตำแหน่งสิ้นสุด โดยที่ไม่ทำการเปลี่ยนแปลงสตริงดั้งเดิม

 const text = "Hello, world!";
const result = text.substring(0, 5);
console.log(result); // Output: Hello

ในตัวอย่างข้างต้น เราใช้ `substring(0, 5)` เพื่อดึงข้อความจากตำแหน่ง 0 ถึง 5 ของสตริง "Hello, world!" ซึ่งจะได้ผลลัพธ์คือ "Hello"

การจัดการกองข้อมูล (Data Handling)

การใช้ `substring()` อาจมีกรณีการใช้งานในโลกจริงที่สำคัญมาก เช่น การจัดการกองข้อมูลจากฐานข้อมูลที่ต้องการดึงข้อมูลบางส่วนออกมาให้เหมาะสมกับการแสดงบน Frontend เช่น รายชื่อสินค้า เป็นต้น

ตัวอย่างเช่น สมมุติมีฐานข้อมูลที่เก็บชื่อสินค้า และเราต้องการดึงชื่อสินค้าเหล่านั้นเพื่อแสดงในหน้าเว็บไซต์ โดยที่ชื่อสินค้านั้นยาวกว่า 20 ตัวอักษร เราจึงต้องการตัดให้เหลือเพียง 20 ตัวอักษรพร้อมกับ "..." ที่ต่อท้ายเพื่อแสดงว่าข้อมูลยังมีอีก

โค้ดตัวอย่างใน Next.js

 import React from 'react';

const products = [
  { id: 1, name: 'Ultra Lightweight Backpack with Extra Space for Your Adventures' },
  { id: 2, name: 'Innovative Bluetooth Speaker with Rich Sound Quality' },
  { id: 3, name: 'Eco-Friendly Water Bottle Made from Recycled Materials' },
];

const ProductList = () => {
  const cutName = (name) => {
    return name.length > 20 ? name.substring(0, 20) + '...' : name;
  };

  return (
    <div>
      <h1>รายการสินค้า</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {cutName(product.name)}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

การทำงานของโค้ด

ในตัวอย่างนี้ เราสร้าง component ที่ชื่อว่า `ProductList` ซึ่งจะแสดงรายการสินค้าจากอาร์เรย์ `products` ที่เราสร้างขึ้น โดยเราใช้ฟังก์ชัน `cutName` เพื่อทำการตรวจสอบว่าชื่อสินค้านั้นยาวเกิน 20 ตัวอักษรไหม ถ้าใช่ก็จะใช้ `substring()` ในการตัดชื่อออกตามเงื่อนไขดังกล่าว

การเพิ่มมูลค่าให้กับการพัฒนาเว็บแอป

การเลือกใช้ฟังก์ชัน `substring()` ช่วยในการควบคุมการแสดงผลข้อมูลที่ยาวให้มีความเข้ากันได้กับขนาดที่แสดงใน UI นอกจากนี้ยังช่วยให้การอ่านข้อมูลมีความง่ายและเร็วขึ้น สำหรับนักพัฒนาที่อยากพัฒนาเว็บแอปพลิเคชันให้เหมาะสมและมีประสิทธิภาพ ควรทำความเข้าใจและนำไปใช้กับกรณีต่าง ๆ ในโลกจริง

เรียนรู้ไปกับ EPT

หากคุณกำลังมองหาที่เรียนรู้การเขียนโปรแกรมในภาษา JavaScript หรือ Next.js อย่าลืมที่จะเข้ามาศึกษากับ EPT (Expert-Programming-Tutor) ที่นี่เรามีหลักสูตรที่ออกแบบมาเพื่อตอบโจทย์ทุกความต้องการของคุณ ถ้าคุณอยากเป็นนักพัฒนาที่เก่งกาจและเข้าใจหลักการทำงานของฟังก์ชันต่าง ๆ รวมถึงการใช้งานจริง ช่วยให้เว็บแอปพลิเคชันของคุณมีประสิทธิภาพมากขึ้น มาเรียนรู้กับเราเถอะ!

# สรุป

การใช้ฟังก์ชัน `substring()` ใน JavaScript นั้นเป็นเรื่องที่ง่ายมากและสามารถนำไปใช้ในกรณีการใช้งานจริงได้อย่างหลากหลาย ไม่ว่าจะเป็นการตัดสตริงของชื่อสินค้า บทความ หรือแม้แต่ข้อความที่แสดงใน UI การทำความเข้าใจการใช้งานนี้จะช่วยให้คุณพัฒนาโปรเจกต์ต่าง ๆ ได้อย่างมีประสิทธิภาพ

หวังว่าบทความนี้จะเป็นประโยชน์กับนักพัฒนาที่กำลังเริ่มต้น และช่วยเพิ่มแรงบันดาลใจในการเรียนรู้การเขียนโปรแกรมต่อไป!

อย่าลืมกลับมาที่ EPT เพื่อเรียนรู้เทคนิคใหม่ ๆ เข้าร่วมกับเราวันนี้เลย!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง