Cách dùng chuỗi (String) trong JavaScript

Lưu ý:

• Chuỗi trong JavaScript không thể thay đổi trực tiếp.
• Khi cần chỉnh sửa chuỗi, phải tạo một chuỗi mới thay vì sửa đổi chuỗi cũ.

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 giúp thao tác với chuỗi một cách dễ dàng. Dưới đây là những phương thức quan trọng thường được sử dụng.

Lấy độ dài chuỗi – length

Thuộc tính length trả về số ký tự trong chuỗi, bao gồm cả dấu cách.

let text = "JavaScript!";
console.log(text.length); // Output: 11

Ứng dụng:

• Xác định độ dài mật khẩu hợp lệ.
• Kiểm tra xem một chuỗi có rỗng hay không (text.length === 0).

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

Dùng toUpperCase() để chuyển thành chữ hoa, toLowerCase() để chuyển thành chữ thường.

let message = "Hello JavaScript!";
console.log(message.toUpperCase()); // Output: HELLO JAVASCRIPT!
console.log(message.toLowerCase()); // Output: hello javascript!

Ứng dụng:

• Kiểm tra dữ liệu nhập vào không phân biệt hoa/thường.
• Xử lý tìm kiếm với dữ liệu nhập vào có thể khác nhau về kiểu chữ.

Cắt chuỗi

let text = "JavaScript là ngôn ngữ lập trình!";
console.log(text.slice(0, 10));  // Output: JavaScript
console.log(text.substring(11, 17)); // Output: là ngôn
console.log(text.substr(11, 6)); // Output: là ngôn

Ứng dụng:

• Cắt tiêu đề bài viết quá dài.
• Lấy phần mở rộng của tên file (filename.slice(-3)).

Tìm kiếm trong chuỗi

let text = "Học JavaScript với ChatGPT!";
console.log(text.indexOf("JavaScript")); // Output: 4
console.log(text.lastIndexOf("t")); // Output: 22
console.log(text.includes("ChatGPT")); // Output: true
console.log(text.startsWith("Học")); // Output: true
console.log(text.endsWith("!")); // Output: true

• Kiểm tra xem URL có bắt đầu bằng "https://" hay không.
• Kiểm tra email có chứa "@".

Thay thế nội dung chuỗi

let text = "Học JS, thực hành JS";
console.log(text.replace("JS", "JavaScript")); // Output: Học JavaScript, thực hành JS
console.log(text.replaceAll("JS", "JavaScript")); // Output: Học JavaScript, thực hành JavaScript

• Censor từ ngữ nhạy cảm trong văn bản.
• Thay thế dấu phẩy , thành dấu . trong số liệu.

Tách chuỗi thành mảng – split()

Phương thức split(separator) chia chuỗi thành một mảng các phần tử dựa trên ký tự phân tách.

let text = "HTML,CSS,JavaScript";
let arr = text.split(",");
console.log(arr); // Output: ["HTML", "CSS", "JavaScript"]

• Chuyển đổi danh sách email thành mảng.
• Phân tách câu thành từ để xử lý ngữ nghĩa.

Nối chuỗi

let firstName = "Alice";
let lastName = "Johnson";

console.log(firstName + " " + lastName); // Output: Alice Johnson
console.log(firstName.concat(" ", lastName)); // Output: Alice Johnson
console.log(`${firstName} ${lastName}`); // Output: Alice Johnson

• Ghép tiêu đề và nội dung bài viết.
• Tạo URL động với tham số.

Xóa khoảng trắng thừa

Dùng trim(), trimStart(), trimEnd() để xóa khoảng trắng thừa.

let text = "   JavaScript   ";
console.log(text.trim());  // Output: "JavaScript"
console.log(text.trimStart()); // Output: "JavaScript   "
console.log(text.trimEnd()); // Output: "   JavaScript"

• Chuẩn hóa dữ liệu nhập từ người dùng (loại bỏ dấu cách dư thừa).
• Xử lý form đăng nhập.

Làm việc với Template Literals trong JavaScript

Tổng quan về Template Literals ( )

Template Literals là một cách mới để làm việc với chuỗi trong JavaScript, được giới thiệu từ ES6. Thay vì sử dụng dấu nháy đơn ('...') hoặc nháy đôi ("..."), chúng ta có thể sử dụng dấu backtick (`...`).

let message = `Chào mừng đến với JavaScript!`;
console.log(message); // Output: Chào mừng đến với JavaScript!

Lợi ích của Template Literals:

• Dễ dàng nội suy biến mà không cần dùng toán tử +.
• Xuống dòng dễ dàng mà không cần ký tự \n.
• Có thể chứa biểu thức trong {}.
• Tăng tính dễ đọc và bảo trì mã nguồn.

Nội suy biến trong Chuỗi (${})

Template Literals cho phép chèn biến và biểu thức vào trong chuỗi bằng cú pháp ${} mà không cần dùng phép nối chuỗi (+).

let name = "Alice";
let age = 25;
console.log(`Tên tôi là ${name} và tôi ${age} tuổi.`);
// Output: Tên tôi là Alice và tôi 25 tuổi.

Chèn biểu thức vào chuỗi:

let a = 10, b = 5;
console.log(`Tổng của ${a} và ${b} là ${a + b}.`);
// Output: Tổng của 10 và 5 là 15.

Gọi hàm trong Template Literals:

function greet(name) {
    return `Xin chào, ${name}!`;
}

console.log(`Thông điệp: ${greet("John")}`);
// Output: Thông điệp: Xin chào, John!

Xuống dòng trong Chuỗi một cách dễ dàng

Với Template Literals, ta có thể viết chuỗi nhiều dòng mà không cần dùng \n.

let message = `Xin chào!
Đây là một chuỗi nhiều dòng
trong JavaScript.`;
console.log(message);

Output:

Xin chào!
Đây là một chuỗi nhiều dòng
trong JavaScript.

So sánh với cách cũ:
Cách cũ phải dùng \n:

let message = "Xin chào!\nĐây là một chuỗi nhiều dòng\ntrong JavaScript.";
console.log(message);

Cách mới dễ đọc hơn với Template Literals.

Ví dụ thực tế về Template Literals trong JavaScript

Hiển thị thông tin người dùng

let user = {
    name: "David",
    email: "[email protected]",
    age: 30
};

console.log(`Người dùng: ${user.name}
Email: ${user.email}
Tuổi: ${user.age}`);

Output:

Người dùng: David
Email: [email protected]
Tuổi: 30

let product = {
    name: "Laptop",
    price: 1500,
    brand: "Dell"
};

let productHTML = `
    <div>
        <h2>${product.name}</h2>
        <p>Thương hiệu: ${product.brand}</p>
        <p>Giá: ${product.price} USD</p>
    </div>
`;

console.log(productHTML);

let baseUrl = "https://api.example.com/users";
let userId = 123;

let apiUrl = `${baseUrl}/${userId}`;
console.log(apiUrl);
// Output: https://api.example.com/users/123

let price = 999.5;
console.log(`Giá sản phẩm: $${price.toFixed(2)}`);
// Output: Giá sản phẩm: $999.50

let num = 123;
let strNum = String(num);

console.log(strNum); // Output: "123"
console.log(typeof strNum); // Output: "string"

let num = 456;
let strNum = num.toString();

console.log(strNum); // Output: "456"
console.log(typeof strNum); // Output: "string"

let str = "123.45";
let num = Number(str);

console.log(num); // Output: 123.45
console.log(typeof num); // Output: "number"

let invalidNum = Number("123abc");
console.log(invalidNum); // Output: NaN

let str = "123.45";
let intNum = parseInt(str);

console.log(intNum); // Output: 123
console.log(typeof intNum); // Output: "number"

console.log(parseInt("123abc")); // Output: 123
console.log(parseInt("abc123")); // Output: NaN

let str = "123.45";
let floatNum = parseFloat(str);

console.log(floatNum); // Output: 123.45
console.log(typeof floatNum); // Output: "number"

let sentence = "JavaScript,HTML,CSS";
let words = sentence.split(",");

console.log(words); // Output: ["JavaScript", "HTML", "CSS"]
console.log(Array.isArray(words)); // Output: true

let text = "Hello";
let chars = text.split("");

console.log(chars); // Output: ["H", "e", "l", "l", "o"]

let phrase = "Lập trình JavaScript rất thú vị";
let wordsArray = phrase.split(" ");

console.log(wordsArray);
// Output: ["Lập", "trình", "JavaScript", "rất", "thú", "vị"]

let sentence = "JavaScript,HTML,CSS,React";
let limitedWords = sentence.split(",", 2);

console.log(limitedWords); // Output: ["JavaScript", "HTML"]

let str = "JavaScript";

for (let i = 0; i < str.length; i++) {
    console.log(str[i]);
}

let str = "JavaScript";

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

let str = "Hello";

console.log(str.charAt(0)); // Output: "H"
console.log(str.charCodeAt(0)); // Output: 72 (Mã Unicode của 'H')

let text = "JavaScript";
console.log(text.slice(1, 4)); // Output: "ava"
console.log(text.substring(1, 4)); // Output: "ava"
console.log(text.substr(1, 4)); // Output: "avaS" (lấy 4 ký tự từ vị trí 1)

let str = "Hello";
str[0] = "Y";  
console.log(str); // Output: "Hello" (Không thay đổi)

str = "Y" + str.slice(1);
console.log(str); // Output: "Yello"

console.log("123" == 123); // Output: true (Do JavaScript chuyển đổi kiểu)

console.log("123" === 123); // Output: false

let name;
console.log(name.length); //  Lỗi: Cannot read properties of undefined

if (name) {
    console.log(name.length);
}