Các phương thức xử lý chuỗi trong JavaScript

Trong JavaScript, chuỗi (String) là một trong những kiểu dữ liệu quan trọng và được sử dụng phổ biến trong lập trình web. Việc xử lý chuỗi hiệu quả giúp lập trình viên dễ dàng thao tác với văn bản, hiển thị dữ liệu trên giao diện, kiểm tra và chuyển đổi thông tin từ người dùng. JavaScript cung cấp nhiều phương thức mạnh mẽ để làm việc với chuỗi, như tìm kiếm, cắt, thay thế, nối chuỗi, chuyển đổi chữ hoa chữ thường và nhiều thao tác khác.

Trong bài viết này, mình sẽ tìm hiểu các phương thức quan trọng giúp xử lý chuỗi một cách linh hoạt và tối ưu, từ những phương thức cơ bản như length, toUpperCase(), slice() đến những phương thức nâng cao như replaceAll(), split(), trim(). Qua đó, bạn sẽ có thể ứng dụng chúng vào thực tế để xử lý dữ liệu một cách hiệu quả hơn.

Các phương thức xử lý chuỗi quan trọng trong JavaScript

JavaScript cung cấp nhiều phương thức hữu ích để thao tác với chuỗi, giúp lập trình viên xử lý dữ liệu hiệu quả hơn. Dưới đây là các phương thức quan trọng cùng với ví dụ minh họa để hiểu rõ cách sử dụng chúng.

Kiểm tra và đo độ dài chuỗi

• length – Trả về số ký tự trong chuỗi, bao gồm cả khoảng trắng.

Ví dụ:

let str = "Hello, JavaScript!";
console.log(str.length); // Kết quả: 18

length hữu ích khi cần xác định độ dài của một chuỗi, chẳng hạn như kiểm tra mật khẩu có đủ ký tự không.

Chuyển đổi chữ hoa ,chữ thường

• toUpperCase() – Chuyển đổi tất cả ký tự trong chuỗi thành chữ hoa.
• toLowerCase() – Chuyển đổi tất cả ký tự trong chuỗi thành chữ thường.

Ví dụ:

let text = "JavaScript";
console.log(text.toUpperCase()); // "JAVASCRIPT"
console.log(text.toLowerCase()); // "javascript"

Cắt chuỗi

• slice(start, end) – Cắt chuỗi từ vị trí start đến end (không bao gồm end).
• substring(start, end) – Giống slice() nhưng không hỗ trợ số âm.
• substr(start, length) – Cắt từ vị trí start với số ký tự length.

Ví dụ:

let str = "Hello, JavaScript!";

console.log(str.slice(7, 17));    // "JavaScript"
console.log(str.substring(7, 17)); // "JavaScript"
console.log(str.substr(7, 10));   // "JavaScript"

So sánh sự khác nhau:

• slice() hỗ trợ chỉ số âm (slice(-6, -1) cắt từ cuối).
• substring() không hỗ trợ số âm.
• substr() nhận tham số thứ hai là độ dài, không phải chỉ số kết thúc.

Tìm kiếm trong Chuỗi

• indexOf(substring) – Tìm vị trí xuất hiện đầu tiên của chuỗi con.
• lastIndexOf(substring) – Tìm vị trí xuất hiện cuối cùng của chuỗi con.
• includes(substring) – Kiểm tra chuỗi có chứa chuỗi con không (true / false).
• startsWith(substring) – Kiểm tra chuỗi có bắt đầu bằng chuỗi con không.
• endsWith(substring) – Kiểm tra chuỗi có kết thúc bằng chuỗi con không.

Ví dụ:

let message = "Hello, JavaScript! JavaScript is fun.";

console.log(message.indexOf("JavaScript"));    // 7
console.log(message.lastIndexOf("JavaScript")); // 19
console.log(message.includes("JavaScript"));   // true
console.log(message.startsWith("Hello"));      // true
console.log(message.endsWith("fun."));         // true

Kết quả :

Thay thế nội dung Chuỗi

• replace(searchValue, newValue) – Thay thế chuỗi con đầu tiên tìm thấy.
• replaceAll(searchValue, newValue) – Thay thế tất cả chuỗi con khớp với giá trị tìm kiếm.

Ví dụ:

let sentence = "JavaScript is awesome. JavaScript is powerful.";

console.log(sentence.replace("JavaScript", "JS")); 
// "JS is awesome. JavaScript is powerful."

console.log(sentence.replaceAll("JavaScript", "JS")); 
// "JS is awesome. JS is powerful."

Lưu ý:

• replace() chỉ thay thế lần đầu tiên tìm thấy.
• replaceAll() yêu cầu ES2021 trở lên. Nếu muốn thay thế toàn bộ, có thể dùng replace() với RegEx (/JavaScript/g).

Tách chuỗi thành mảng

• split(separator, limit) – Chuyển chuỗi thành mảng dựa trên ký tự phân tách.

Ví dụ:

let csv = "apple,banana,orange";
let fruits = csv.split(","); 
console.log(fruits); // ["apple", "banana", "orange"]

Nối chuỗi

• concat(str1, str2, ...) – Nối nhiều chuỗi.
• Toán tử + – Nối chuỗi nhanh chóng.
• Template Literals ${} – Nối chuỗi hiện đại và dễ đọc hơn.

Ví dụ:

let firstName = "John";
let lastName = "Doe";

console.log(firstName.concat(" ", lastName)); // "John Doe"
console.log(firstName + " " + lastName);      // "John Doe"
console.log(`${firstName} ${lastName}`);      // "John Doe"

Template Literals (${}) giúp mã nguồn dễ đọc và trực quan hơn.

Xóa khoảng trắng thừa trong Chuỗi

• trim() – Xóa khoảng trắng ở đầu và cuối chuỗi.
• trimStart() – Xóa khoảng trắng ở đầu chuỗi.
• trimEnd() – Xóa khoảng trắng ở cuối chuỗi.

Ví dụ:

let text = "   Hello, JavaScript!   ";
console.log(text.trim());      // "Hello, JavaScript!"
console.log(text.trimStart()); // "Hello, JavaScript!   "
console.log(text.trimEnd());   // "   Hello, JavaScript!"

Kết quả :

Các phương thức kiểm tra và chuyển đổi Chuỗi trong JavaScript

Trong JavaScript, ngoài các phương thức xử lý chuỗi thông thường, chúng ta còn có các phương thức giúp kiểm tra ký tự trong chuỗi và chuyển đổi kiểu dữ liệu một cách linh hoạt.

Kiểm tra ký tự trong Chuỗi

charAt(index) – Lấy ký tự tại vị trí chỉ định

Phương thức charAt(index) giúp truy xuất một ký tự cụ thể trong chuỗi dựa trên vị trí (index). Chỉ số bắt đầu từ 0 (tức là ký tự đầu tiên có chỉ số 0).

Ví dụ:

let text = "JavaScript";
console.log(text.charAt(0));  // "J"
console.log(text.charAt(4));  // "S"
console.log(text.charAt(20)); // "" (chuỗi rỗng vì vị trí ngoài phạm vi)

• Dùng để kiểm tra ký tự đầu tiên (charAt(0)) khi cần xác định định dạng dữ liệu nhập vào (ví dụ: kiểm tra xem chuỗi có bắt đầu bằng chữ cái hay không).

charCodeAt(index) – Lấy mã Unicode của ký tự

Phương thức charCodeAt(index) trả về mã Unicode (mã ASCII) của ký tự tại vị trí chỉ định.

Ví dụ:

let text = "ABC";
console.log(text.charCodeAt(0));  // 65 (mã Unicode của 'A')
console.log(text.charCodeAt(1));  // 66 (mã Unicode của 'B')
console.log(text.charCodeAt(2));  // 67 (mã Unicode của 'C')

• Dùng để kiểm tra mã ký tự, ví dụ như kiểm tra xem một ký tự có phải là chữ cái hay số bằng cách so sánh mã Unicode của nó.
• Có thể dùng để mã hóa hoặc giải mã dữ liệu trong một số thuật toán bảo mật.

Chuyển đổi kiểu dữ liệu

JavaScript cho phép chuyển đổi giữa chuỗi và các kiểu dữ liệu khác như số (number), đối tượng (object), và mảng (array). Dưới đây là các phương thức phổ biến.

String(value) – Chuyển đổi một giá trị bất kỳ thành chuỗi

Hàm String(value) có thể chuyển đổi bất kỳ kiểu dữ liệu nào thành kiểu chuỗi (string).

Ví dụ:

console.log(String(123));    // "123"
console.log(String(true));   // "true"
console.log(String(null));   // "null"
console.log(String(undefined)); // "undefined"
console.log(String([1, 2, 3])); // "1,2,3"

• Khi cần chuyển đổi dữ liệu từ số, boolean, mảng hoặc đối tượng thành chuỗi để hiển thị trên giao diện người dùng.

toString() – Chuyển đổi một số hoặc đối tượng thành chuỗi

Phương thức toString() chỉ hoạt động với các kiểu dữ liệu như số (number), boolean, mảng (array) và đối tượng (object). Tuy nhiên, nó không thể được sử dụng trên null hoặc undefined (sẽ gây lỗi).

Ví dụ:

console.log((123).toString());    // "123"
console.log((true).toString());   // "true"
console.log([1, 2, 3].toString()); // "1,2,3"
console.log({name: "John"}.toString()); // "[object Object]"

Kết quả :

Sự khác biệt giữa String(value) và toString()

Nên dùng String(value) nếu muốn chắc chắn không gặp lỗi khi chuyển đổi.

parseInt(string), parseFloat(string) – Chuyển đổi chuỗi số thành kiểu số

Hai phương thức này giúp chuyển đổi chuỗi thành số (number).

• parseInt(string) – Chuyển chuỗi thành số nguyên (integer), chỉ lấy phần số trước dấu chấm.
• parseFloat(string) – Chuyển chuỗi thành số thực (float), giữ nguyên phần thập phân.

Ví dụ:

console.log(parseInt("123"));      // 123
console.log(parseInt("123.45"));   // 123 (chỉ lấy phần nguyên)
console.log(parseInt("100px"));    // 100 (bỏ qua ký tự không phải số)

console.log(parseFloat("123.45")); // 123.45 (giữ phần thập phân)
console.log(parseFloat("99.99px"));// 99.99 (bỏ qua ký tự không phải số)

Kết quả :

Lưu ý quan trọng:

• Nếu chuỗi chứa ký tự không phải số, parseInt() và parseFloat() sẽ lấy phần số đầu tiên và bỏ qua phần còn lại.
• Nếu chuỗi không bắt đầu bằng số, kết quả sẽ là NaN (Not a Number).

Ví dụ lỗi thường gặp:

console.log(parseInt("abc123"));   // NaN (Không thể chuyển đổi vì chuỗi không bắt đầu bằng số)
console.log(parseFloat("xyz"));    // NaN

let text = "JavaScript";

for (let i = 0; i < text.length; i++) {
    console.log(`Ký tự tại index ${i}: ${text[i]}`);
}

let text = "JavaScript";

for (let char of text) {
    console.log(char);
}

J  
a  
v  
a  
S  
c  
r  
i  
p  
t  

let text = "JavaScript";

// slice() hỗ trợ số âm
console.log(text.slice(0, 4));   // "Java"
console.log(text.slice(-6, -1)); // "Scrip"

// substring() không hỗ trợ số âm
console.log(text.substring(0, 4));   // "Java"
console.log(text.substring(4, 0));   // "Java" (đảo ngược)

// substr() cắt theo độ dài
console.log(text.substr(0, 4));  // "Java"
console.log(text.substr(-6, 5)); // "Scrip"

let text = "Hello";
text[0] = "M"; //  Không thể thay đổi ký tự trong chuỗi
console.log(text); // "Hello" (không bị thay đổi)

let text = "Hello";
text = "M" + text.slice(1); // Tạo chuỗi mới
console.log(text); // "Mello"

console.log("123" == 123);  //  true (vì JavaScript tự động chuyển đổi kiểu)
console.log("true" == true); //  false (vì "true" không chuyển đổi thành `true`)

console.log("123" === 123);  //  false (so sánh cả kiểu dữ liệu)
console.log("hello" === "hello"); //  true

let text;
console.log(text.length); //  TypeError: Cannot read properties of undefined

let text;
console.log(text?.length); //  undefined (không gây lỗi)

if (text) {
    console.log(text.length);
} else {
    console.log("Chuỗi không hợp lệ");
}