JavaScript - Chuỗi: Hướng dẫn cho người mới bắt đầu

Xin chào, các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của các chuỗi trong JavaScript. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - vào cuối bài hướng dẫn này, bạn sẽ viết mã như một chuyên gia! Hãy bắt đầu nào!

JavaScript - Strings

什么是字符串？

Trong JavaScript, các chuỗi là các序列 các ký tự. Chúng có thể là chữ cái, số, ký hiệu, hoặc thậm chí là khoảng trống. Hãy nghĩ của chúng như là văn bản trong thế giới lập trình của bạn.

Ví dụ:

let greeting = "Hello, World!";
let number = "42";
let symbol = "@#$%";

Mỗi trong số này đều là một chuỗi, ngay cả con số! Trong JavaScript, nếu nó trong dấu ngoặc kép, nó là một chuỗi.

Cú pháp

Tạo một chuỗi trong JavaScript dễ như trở bàn tay. Bạn có thể sử dụng dấu ngoặc đơn (''), dấu ngoặc kép (""), hoặc thậm chí là dấu backtick (``). Hãy xem một số ví dụ:

let singleQuotes = 'Tôi là một chuỗi';
let doubleQuotes = "Tôi cũng là một chuỗi";
let backticks = `Và tôi cũng là một chuỗi!`;

Mẹo chuyên nghiệp: Backticks có một siêu năng lực đặc biệt - chúng cho phép chúng ta nhúng các biểu thức. Chúng ta sẽ đến phần đó sau!

Các Thuộc tính Đối tượng Chuỗi trong JavaScript

Các chuỗi trong JavaScript có một số thuộc tính内置. Nó giống như chúng có thẻ ID riêng với thông tin về chính chúng. Hãy xem xét thuộc tính phổ biến nhất:

length

Thuộc tính length cho chúng ta biết có bao nhiêu ký tự trong một chuỗi.

let myName = "Alice";
console.log(myName.length); // Output: 5

Ở đây, myName.length là 5 vì "Alice" có 5 ký tự.

Các Phương thức Đối tượng Chuỗi trong JavaScript

Bây giờ, hãy xem xét một số tuyệt kỹ mà các chuỗi có thể làm. Những phương thức này được gọi là phương thức, và chúng giống như những khả năng đặc biệt mà các chuỗi có.

Dưới đây là bảng một số phương thức chuỗi phổ biến:

Phương thức	Mô tả	Ví dụ
toUpperCase()	Chuyển đổi chuỗi thành chữ hoa	"hello".toUpperCase() trả về "HELLO"
toLowerCase()	Chuyển đổi chuỗi thành chữ thường	"WORLD".toLowerCase() trả về "world"
trim()	Loại bỏ khoảng trống ở cả hai đầu	" hi ".trim() trả về "hi"
charAt(index)	Trả về ký tự tại chỉ số chỉ định	"hello".charAt(1) trả về "e"
indexOf(substring)	Trả về chỉ số của lần xuất hiện đầu tiên của chuỗi con	"hello".indexOf("l") trả về 2
slice(start, end)	Trích xuất một phần của chuỗi	"hello".slice(1, 4) trả về "ell"
replace(old, new)	Thay thế giá trị chỉ định bằng giá trị khác	"hello".replace("h", "j") trả về "jello"

Hãy cùng xem xét một số trong số này với các ví dụ:

toUpperCase() và toLowerCase()

let shout = "hello".toUpperCase();
console.log(shout); // Output: HELLO

let whisper = "QUIET PLEASE".toLowerCase();
console.log(whisper); // Output: quiet please

Hãy tưởng tượng bạn đang xây dựng một ứng dụng nhắn tin. Các phương thức này có thể rất hữu ích để thêm tính năng CAPS LOCK hoặc đảm bảo rằng các tên người dùng luôn được lưu trữ trong chữ thường.

trim()

let untidy = "   spruce up   ";
let tidy = untidy.trim();
console.log(tidy); // Output: "spruce up"

Điều này rất tiện lợi khi bạn đang xử lý đầu vào của người dùng. Người dùng thường vô tình thêm khoảng trống ở đầu hoặc cuối văn bản của họ.

charAt(index)

let word = "JavaScript";
console.log(word.charAt(4)); // Output: S

Nhớ rằng, trong lập trình, chúng ta bắt đầu đếm từ 0, không phải 1. Vì vậy, ký tự thứ 5 nằm ở chỉ số 4!

indexOf(substring)

let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.indexOf("fox")); // Output: 16

Điều này cho chúng ta biết rằng "fox" bắt đầu ở ký tự thứ 17 (nhớ rằng, chúng ta đếm từ 0).

slice(start, end)

let fruit = "apple,banana,cherry";
let banana = fruit.slice(6, 12);
console.log(banana); // Output: banana

Slice giống như việc sử dụng kéo để cắt một phần của chuỗi của bạn. Ở đây, chúng ta đang cắt ra "banana" từ chuỗi quả của chúng ta.

replace(old, new)

let oldSaying = "The early bird catches the worm";
let newSaying = oldSaying.replace("worm", "success");
console.log(newSaying); // Output: The early bird catches the success

Phương thức này rất tuyệt vời để thực hiện các thay đổi nhanh chóng cho các chuỗi của bạn.

Ví dụ

Hãy öss hợp tất cả những điều này với một ví dụ vui. Hãy tưởng tượng chúng ta đang xây dựng một máy tạo thẻ tên đơn giản:

function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Hello, my name is ${upperName} and I am a ${trimmedRole}`;
return tag;
}

let myTag = createNameTag("  alice  ", "  developer   ");
console.log(myTag); // Output: Hello, my name is ALICE and I am a developer

Trong ví dụ này, chúng ta sử dụng toUpperCase() để làm nổi bật tên, trim() để loại bỏ bất kỳ khoảng trống nào, và các-literals (dấu backticks) để dễ dàng kết hợp các chuỗi của chúng ta.

Các phương thức bao bọc HTML

JavaScript cũng cung cấp các phương thức để bao bọc các chuỗi trong các thẻ HTML. Những phương thức này có thể rất hữu ích khi bạn đang tạo nội dung HTML bằng JavaScript. Dưới đây là một số:

let text = "Bold and Beautiful";
console.log(text.bold()); // Output: <b>Bold and Beautiful</b>
console.log(text.italics()); // Output: <i>Bold and Beautiful</i>
console.log(text.link("https://example.com")); // Output: <a href="https://example.com">Bold and Beautiful</a>

Tuy nhiên, cần lưu ý rằng các phương thức này được coi là lỗi thời. Trong phát triển web hiện đại, thường tốt hơn là trực tiếp maniputate DOM hoặc sử dụng một khung công tác.

Và thế là bạn đã bước vào thế giới của các chuỗi JavaScript! Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm với các phương thức này. Trước khi bạn biết, bạn sẽ viết các chương trình phức tạp một cách dễ dàng. Chúc bạn vui vẻ với mã code!

Credits: Image by storyset