Phương thức charAt() trong JavaScript

Trong JavaScript tồn tại một phương thức của đối tượng String cho phép xác định ký tự nào nằm tại một chỉ mục (index) cụ thể trong chuỗi. Bài viết này sẽ giới thiệu phương thức đó và minh họa cách sử dụng.

Kiểu nguyên thủy (Primitive Types) trong JavaScript

Trước khi đi vào chi tiết, chúng ta cần hiểu về các kiểu nguyên thủy trong JavaScript. Các kiểu này là gì và "nguyên thủy" có nghĩa là gì?

Kiểu nguyên thủy (primitive types/values) là những giá trị không phải là đối tượng và không có phương thức đi kèm. Trong JavaScript, các kiểu nguyên thủy bao gồm: string, number, boolean, bigint, symbol và undefined. Hôm nay chúng ta sẽ tập trung vào kiểu chuỗi nguyên thủy (primitive string value).

Điều thú vị về kiểu chuỗi nguyên thủy là nó thường có thể thay thế cho đối tượng String nguyên thủy. Trong hầu hết các trường hợp, JavaScript sẽ tự động bao bọc (wrap) một đối tượng String wrapper xung quanh chuỗi nguyên thủy và ép buộc (coerce) việc sử dụng các phương thức String. Do đó, trong hầu hết các trường hợp, bạn không cần lo lắng về việc chuyển đổi chuỗi nguyên thủy (không có phương thức) sang đối tượng String nguyên thủy (có phương thức).

Cú pháp

Cú pháp của phương thức charAt() của String khá đơn giản. Chúng ta bắt đầu với chuỗi cần kiểm tra. Vì nó là một đối tượng String, chúng ta sử dụng ký pháp chấm (dot notation) để truy cập phương thức và gắn nó vào cuối. Để gọi phương thức, thêm dấu ngoặc đơn ở cuối cùng chứa chỉ mục (index) muốn tra cứu.

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

Phương thức charAt() trả về ký tự tại chỉ mục đó trong chuỗi. Hãy nhớ rằng chuỗi là zero-based (chỉ mục bắt đầu từ 0) và tăng dần theo thứ tự. Dưới đây là ví dụ hoạt động – bạn có thể nhập chuỗi và chỉ mục rồi nhấn submit. Trừ khi bạn yêu cầu chỉ mục ngoài phạm vi, nó sẽ trả về một ký tự đơn tại chỉ mục bạn yêu cầu.

Ví dụ minh họa

Dưới đây là một triển khai hoàn chỉnh cho phép nhập chuỗi và chỉ mục để xem kết quả:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo charAt()</title>
</head>
<body>
  <form onsubmit="handleSubmit(event)">
    <label for="input-string">Nhập chuỗi:</label>
    <input id="input-string" onchange="handleChange(event)" type="text" name="inputVal" value=""/>
    <label for="input-index">Nhập chỉ mục:</label>
    <input id="input-index" onchange="handleChange(event)" type="text" name="numVal" value=""/>
    <input type="submit" value="Submit" />
  </form>
  <h3 id="result"></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 = "Chỉ mục phải nhỏ hơn độ dài chuỗi và lớn hơn hoặc bằng 0";
        } else {
          errorVal = "";
          numVal = e.target.value;
        }
      }
    }
    
    const handleSubmit = e => {
      e.preventDefault();
      const root = document.querySelector("#result");
      if(errorVal) {
        root.innerHTML = errorVal;
      } else {
        const result = new String(inputVal).charAt(Number(numVal));
        root.innerHTML = result;
        console.log(result);
      }
    }
  </script>
</body>
</html>

Phương thức charAt() trong JavaScript

Kiểu nguyên thủy (Primitive Types) trong JavaScript

Cú pháp

Ví dụ minh họa

Bài viết liên quan