Categories JavaScript

Các câu lệnh JavaScript dùng để thao tác với chuỗi (string)

Tôi vẫn luôn hứng khởi với JavaScript, khía cạnh chủ yếu là vì nó có thể viết ra các ứng dụng chạy trên trình duyệt mà không làm bạn tốn kém đáng kể tài nguyên máy chủ như các ngôn ngữ PHP, lý do là vì các đoạn mã được thực thi trên máy khách.

Hôm nay tôi sẽ tìm hiểu các hàm liên quan tới string.

Trước tiên chúng ta tạo cái form demo để kiểm tra:

<form id="seForm" action="" onsubmit="return validateForm();">        
      <input type="text" id="seInput" autofocus placeholder="">
      <input type="submit" value="Nhập" id="seButton">
</form>

Sau đó là hàm JS để bắt đầu viết mã vào bên trong:

<script>
        function validateForm() {
                // các đoạn mã sẽ viết ở đây             
                alert(str); // cái alert này để bật popup thông báo kết quả
                return false;
       }
</script>

Các hàm đơn giản

Đầu tiên để lấy thông tin nhập vào input có id là seInput, chúng ta sử dụng câu lệnh:

let str = document.getElementById("seInput").value; // lấy dữ liệu đầu vào

Để chuyển chuỗi đầu vào thành ký tự thường, chúng ta làm như sau:

let lower = str.toLowerCase(); // chuyển thành ký tự thường

Bạn thay biến str trong alert bằng lower để xem kết quả.

Để chuyển thành ký tự HOA toàn bộ, ta làm như sau:

let upper = str.toUpperCase();

Để loại bỏ khoảng trống dư trước, sau và giữa các từ chúng ta kết hợp hai lệnh repalacetrim:

let trim = lower.replace(/\s+/g,' ').trim(); // xóa khoảng trống dư thừa

Trong đó phần trong replace là mẫu tìm kiếm theo cú pháp của Regex, với \s+ chỉ khoảng trắng từ một đổ lên, và g chỉ đến việc tìm kiếm toàn bộ chuỗi, dấu ' ' ý là thay thế bằng khoảng trắng tiêu chuẩn này (chỉ có một khoảng trắng).

Để tách chuỗi thành các từ khác nhau dựa trên khoảng trắng, chúng ta dùng câu lệnh split:

const myArr = str.split(" ");
// Ví dụ đầu vào là nguyễn đức anh, đầu ra sẽ thành mảng nguyễn,đức,anh

Nếu chỉ muốn lấy số từ nhất định thôi thì chúng ta bổ sung thêm tham số đằng sau, ví dụ:

const myArr = str.split(" ", 2); // nó sẽ chỉ lấy 2 từ đầu tiên
// ví dụ đầu vào là nguyễn đức anh, thì đầu ra sẽ là nguyễn,đức
// mảng của JS cũng bắt đầu đánh số phần tử đầu tiên từ 0, nhưng trong câu lệnh phần tử cuối nó lấy sẽ có giá trị nhỏ hơn một so với tham số đầu vào. Ví dụ ở trên là 2 thì nó chỉ lấy các phẩn tử mảng là 0 và 1 (chứ không lấy cả phần tử có vị trí trong mảng là 2)

Lấy một ký tự ở vị trí cụ thể trong chuỗi ta dùng lệnh:

str.charAt(n);

Trong đó n là giá trị chỉ vị trí, nếu muốn lấy ký tự đầu tiên thì n là 0, còn lấy ký tự thứ 5 chẳng hạn, thì n là 4.

let str = "nguyễn đức anh";
str.charAt(1); // sẽ có giá trị là g
str.charAt(4); // sẽ có giá trị là ễ

Để trích xuất các ký tự trong một chuỗi ta dùng lệnh slice()

Slice có 2 tham số đầu vào là vị trí ký tự bắt đầu muốn lấy cho đến vị trí ký tự gần cuối cùng muốn lấy. Ví dụ:

str.slice(0, 5); // sẽ lấy các ký tự từ vị trí 0 (tức ký tự đầu tiên) cho đến vị trí thứ 4 (trong cách đánh số mảng), tức ký tự thứ 5

Ví dụ:

let str = "nguyễn đức anh";
str.slice(0, 5); // sẽ cho kết quả là nguyễ
str.slice(7, 10); // sẽ cho kết quả là đức

Các hàm thao tác với mảng là chuỗi, và mảng nói chung

Câu lệnh dùng để đếm số lượng phần tử của một mảng.

const name = ["nguyễn", "đức", "thái", "anh"];
let num = name.length;
alert(num); // sẽ cho kết quả là 4, mảng này có bốn phần tử

Chọn các phần tử trong một mảng, ta dùng lệnh slice. Nó sẽ tạo thành một mảng mới, không ảnh hưởng gì đến mảng nó lấy phần tử. Ví dụ:

const name = ["nguyễn", "đức", "thái", "anh"];
const f = name.slice(1, 3); // kết quả của f là một mảng gồm 2 phần tử thứ 1 và thứ 2 tính theo cách đánh số mảng, tức là sẽ gồm "đức" và "thái", không bao gồm phần tử ở vị trí thứ 3 trong mảng.

Lưu ý: bạn nào biết về PHP có thể thấy cách đánh số mảng của JS cũng tương tự, đều bắt đầu ở 0, chứ không phải 1 như thói quen của con người. Tuy nhiên câu lệnh của JS khác PHP ở vị trí lấy cuối cùng. Ví dụ nếu trong PHP câu lệnh trên thường sẽ là lấy từ vị trí 1 cho đến vị trí 3 trong mảng. Còn JS chỉ giống ở vị trí đầu tiên trong tham số, còn vị trí cuối được phép lấy là trừ đi 1 từ tham số tiếp theo, trong ví dụ trên là 2 (= 3 – 1).

Từ ví dụ trên thì để lấy chỉ một phần tử trong mảng ta sẽ dùng hai tham số có giá trị liên tiếp nhau, tham số đầu là vị trí của phần tử trong mảng mà ta muốn lấy. Ví dụ:

const name = ["nguyễn", "đức", "thái", "anh"];
const lName = name.slice(0,1); // kết quả của lName sẽ là "nguyễn", và chỉ phần tử này mà thôi, "nguyễn" có vị trí trong mảng là 0

Chuyển các phần tử trong mảng thành dạng chuỗi, ta dùng lệnh toString(). Kết quả là một chuỗi gồm các phần tử của mảng, ngăn cách nhau bằng dấu phẩy. Ví dụ:

const name = ["nguyễn", "đức", "anh"];
let text = name.toString(); // kết quả là nguyễn,đức,anh

Tìm xem một string có trong mảng nào đấy không:

<p id="demo"></p>
<script>
const name = ["nguyễn", "trần", "lê", "phạm", "trần", "phạm"];

document.getElementById("demo").innerHTML = name.findIndex(checkName);

// kết quả in ra màn hình sẽ là 3 

function checkName(namex) {
  return namex == "phạm";
}
</script>

Mảng trên gồm 6 phần tử là các họ người. Giờ câu lệnh sẽ tìm xem trong mảng đó có phần tử “phạm” không, nếu có sẽ trả về vị trí đầu tiên mà nó tìm được. Nếu không có, nó sẽ trả về kết quả -1.

Kiểm tra xem một biến có phải là mảng không ta dùng lệnh isArray. Nó sẽ trả về kết quả true (đúng là mảng) hoặc false (không phải là mảng).

<p id="demo"></p>
<p id="demo2"></p>

<script>
const name = ["nguyễn", "đức", "anh"];
const num = 5;

document.getElementById("demo").innerHTML = Array.isArray(name);
document.getElementById("demo2").innerHTML = Array.isArray(num);
</script> // sẽ cho kết quả true với name và false với num

Tàm tạm với ngần ấy lệnh, chúng ta sẽ học hỏi thêm qua các bài tập thực tế nhé.

Back to Top