Loạt bài JavaScript cơ bản · Bài 13/18 — Mục lục học tập

Tên học viên, từ khóa tìm kiếm và nội dung ô nhập đều là chuỗi. Bài này hướng dẫn chuẩn hóa văn bản và tạo thông báo dễ đọc. Chúng ta sẽ phân biệt xử lý chữ với thay đổi HTML của trang.

Độ dài và ký tự

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]); // J
console.log(language.slice(0, 4)); // Java

Chỉ số chuỗi bắt đầu từ 0; slice lấy đoạn từ vị trí đầu đến trước vị trí kết thúc. Với ký tự Unicode như emoji, length đếm đơn vị mã UTF-16 nên không luôn bằng số ký tự người dùng nhìn thấy. Các ví dụ ở đây dùng văn bản đơn giản, không dùng length như thước đo tuyệt đối cho mọi ngôn ngữ.

Chuỗi không bị sửa tại chỗ

const original = "  JavaScript cơ bản  ";
const cleaned = original.trim();
const lower = cleaned.toLowerCase();
console.log(cleaned); // JavaScript cơ bản
console.log(lower); // javascript cơ bản
console.log(original); // vẫn còn khoảng trắng đầu/cuối

Các phương thức này trả chuỗi mới. Nếu bạn gọi trim mà không dùng kết quả, biến ban đầu không tự thay đổi. trim chỉ xóa khoảng trắng ở hai đầu, không gom mọi khoảng trắng ở giữa.

Tìm kiếm văn bản

const title = "Học JavaScript cơ bản";
const keyword = " JAVASCRIPT ";
const matched = title.toLowerCase().includes(keyword.trim().toLowerCase());
console.log(matched); // true
console.log(title.startsWith("Học")); // true
console.log(title.endsWith("cơ bản")); // true

includes phân biệt hoa thường nên ví dụ chuyển cả tiêu đề và từ khóa về chữ thường. Cách này chưa phải tìm kiếm bỏ dấu tiếng Việt: “co ban” không tự khớp với “cơ bản”. Hãy mô tả đúng khả năng tìm kiếm cho người dùng.

Tách và ghép

const input = "HTML, CSS, JavaScript";
const skills = input.split(",").map((item) => item.trim());
console.log(skills); // ["HTML", "CSS", "JavaScript"]
console.log(skills.join(" | ")); // HTML | CSS | JavaScript

split tạo mảng từ chuỗi theo dấu phân cách, còn join ghép các phần tử mảng thành chuỗi. Khi dữ liệu có thể chứa mục rỗng, bạn có thể lọc thêm sau bước trim.

Template literal

const name = "An";
const completed = 5;
const message = `Chào ${name}, bạn đã học ${completed} bài.`;
console.log(message);

Template literal dùng dấu backtick và cú pháp nội suy dollar kèm ngoặc nhọn. Nó hữu ích khi tạo thông báo có nhiều biến. Nội suy không tự làm sạch dữ liệu để chèn vào HTML; khi hiển thị dữ liệu người dùng, hãy dùng textContent ở bài DOM.

Bài tập và gợi ý

Cho chuỗi " html, , css, javascript ". Tạo mảng ba tên kỹ năng không rỗng, viết hoa toàn bộ, rồi ghép bằng dấu phẩy.

const input = " html, , css, javascript ";
const result = input.split(",")
  .map((item) => item.trim())
  .filter((item) => item !== "")
  .map((item) => item.toUpperCase())
  .join(", ");
console.log(result); // HTML, CSS, JAVASCRIPT

Ghi nhớ: chuẩn hóa trước khi so sánh và luôn nhận lại kết quả từ phương thức chuỗi. Đừng dùng thao tác xử lý chuỗi như một cơ chế bảo vệ HTML.