เมธอด charAt() ของ JavaScript: คู่มือการใช้งาน

ใน JavaScript มีเมธอดของอ็อบเจ็กต์ String ที่ช่วยให้เรารู้ได้ว่าตัวอักษรใดอยู่ที่ดัชนี (index) ที่กำหนดในสตริง บทความนี้จะอธิบายถึงเมธอดนี้และแสดงวิธีการใช้งาน

ชนิดข้อมูลพื้นฐาน (Primitive Types) ใน JavaScript

ก่อนจะเจาะลึกเมธอด charAt() มาทำความเข้าใจชนิดข้อมูลพื้นฐานใน JavaScript ก่อน ชนิดข้อมูลพื้นฐาน (primitive types) คือค่าที่ไม่ใช่อ็อบเจ็กต์และไม่มีเมธอดผูกมาด้วย ใน JavaScript มีชนิดพื้นฐาน 6 ชนิด ได้แก่ string, number, boolean, bigint, symbol และ undefined บทความนี้จะเน้นไปที่ชนิด string

จุดน่าสนใจของค่า string แบบพื้นฐานคือ มักสามารถสลับใช้ได้กับอ็อบเจ็กต์ String แบบพื้นฐาน ในกรณีส่วนใหญ่ JavaScript จะห่อ (wrap) อ็อบเจ็กต์ String ไว้รอบค่า string แบบพื้นฐานโดยอัตโนมัติ และบังคับให้ใช้เมธอดของ String ได้ ดังนั้นในทางปฏิบัติ เราไม่ต้องกังวลเรื่องการแปลงค่า string แบบพื้นฐาน (ที่ไม่มีเมธอด) ให้เป็นอ็อบเจ็กต์ String (ที่มีเมธอด)

ไวยากรณ์ (Syntax)

ไวยากรณ์ของเมธอด String charAt() เข้าใจง่ายมาก เริ่มจากสตริงที่ต้องการตรวจสอบ เนื่องจากเป็นอ็อบเจ็กต์ String เราจึงใช้ dot notation เพื่อเข้าถึงเมธอดและต่อท้ายไว้ เรียกใช้งานโดยใส่ดัชนีที่ต้องการในวงเล็บ

const charAtFive = new String("It is warm today.").charAt(5);

เมธอด charAt() จะคืนค่าตัวอักษรที่ดัชนีนั้นในสตริง จำไว้ว่า สตริงเป็น zero-based คือดัชนีเริ่มจาก 0 และเพิ่มขึ้นทีละ 1 ตามลำดับ นี่คือตัวอย่างการทำงานจริง – ใส่สตริงและดัชนี แล้วกด Submit หากดัชนีไม่เกินขอบเขต จะคืนค่าตัวอักษรตัวเดียวที่ดัชนีนั้น

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>charAt() Demo</title>
</head>
<body>
  <form onsubmit="handleSubmit(event)">
    <label for="input-string">ป้อนสตริง:</label>
    <input id="input-string" onchange="handleChange(event)" type="text" name="inputVal" value=""/>
    <label for="input-index">ป้อนดัชนี:</label>
    <input id="input-index" onchange="handleChange(event)" type="number" name="numVal" value=""/>
    <input type="submit" value="Submit" />
  </form>
  <h3 id="root"></h3>
  <script>
    let inputVal = '';
    let numVal = '';
    let errorVal = '';

    const handleChange = e => {
      if (e.target.name === "inputVal") {
        inputVal = e.target.value;
      } else {
        if (inputVal.length - 1 < e.target.value || e.target.value < 0) {
          errorVal = "ต้องป้อนดัชนีน้อยกว่าความยาวสตริงและมากกว่าหรือเท่ากับ 0";
        } else {
          errorVal = "";
          numVal = e.target.value;
        }
      }
    };

    const handleSubmit = e => {
      e.preventDefault();
      const root = document.querySelector("#root");
      if (errorVal) {
        root.innerHTML = errorVal;
      } else {
        const result = new String(inputVal).charAt(Number(numVal));
        root.innerHTML = result;
        console.log(result);
      }
    };
  </script>
</body>
</html>

บทความแนะนำเพิ่มเติม

• JavaScript Reverse String Code Challenge
• JavaScript Pop Method: What is It and How to Use It
• How to Use Substring in JavaScript
• JavaScript String Contains: Step-By-Step Guide
• JavaScript toUpperCase and toLowerCase