Làm cách nào để viết bảng chữ cái trong JavaScript?

Hãy tưởng tượng bạn đang xây dựng một trò chơi chữ bằng JavaScript và bạn cần chọn một ký tự ngẫu nhiên từ bảng chữ cái, nhưng bạn không muốn nhập tất cả các chữ cái bằng tay. (Hãy nói với tôi rằng bạn đã không xem xét điều đó 😅)

Không, chúng tôi muốn tạo một Mảng với tất cả các ký tự của bảng chữ cái (tôi đang đề cập đến bảng chữ cái la tinh). Chúng tôi muốn làm điều đó một cách đơn giản và nhanh nhất có thể

Đi thôi 🚀

Tạo một mảng với 26 mục

Đầu tiên, chúng ta cần một Mảng có 26 mục vì bảng chữ cái Latinh có 26 chữ cái. Chúng ta có thể làm điều đó một cách đơn giản với mã này

[...Array(26)]; 
// returns [...undefined, undefined]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhận một lá thư dựa trên một số

Bây giờ chúng ta có một Mảng với 26 mục trong đó, chúng ta cần có cách lấy các chữ cái dựa trên Mảng này. Vì vậy, hãy tạo một Array có 26 số

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Dựa trên những con số đó, chúng ta sẽ nhận được một lá thư. Để đạt được điều này, chúng tôi cần có

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

2 (kiểm tra tài liệu MDN để biết bạn có thể làm gì với phương thức fromCharCode)

[...Array(26)].map((_, i) => String.fromCharCode(i)); 
// returns ['\x00', '\x01', '\x02', '\x03', '\x04', '\x05', '\x06', '\x07', '\b', '\t', '\n', '\v', '\f', '\r', '\x0E', '\x0F', '\x10', '\x11', '\x12', '\x13', '\x14', '\x15', '\x16', '\x17', '\x18', '\x19']

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Lấy đúng chữ cái trong bảng chữ cái

Nhưng những nhân vật đó không phải là những người chúng ta muốn. Vì vậy, chúng ta phải thêm một cái gì đó nhiều hơn nữa. W3Schools cung cấp một danh sách tất cả các chữ cái có sẵn. Chúng ta có thể thấy chữ “a” ở số 97. Bây giờ chúng ta có thể bắt đầu đếm

[...Array(26)].map((_, i) => String.fromCharCode(i + 97)); 
// returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng tôi có bảng chữ cái của chúng tôi

Chọn giữa chữ hoa và chữ thường

Nếu bạn muốn chữ hoa thay vì chữ thường, bạn nên bắt đầu từ vị trí 65. Hãy tạo một chức năng hỗ trợ cả hai

function generateAlphabet(capital = false) {
    return [...Array(26)].map((_, i) => String.fromCharCode(i + (capital ? 65 : 97)));
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bên trong phương thức

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

3, toán tử bậc ba kiểm tra xem

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

4 có phải là

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

5 hay không. Lưu ý rằng giá trị mặc định của tham số

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

4 là

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

5. Khi giá trị là

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

2, nó sẽ trả về

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

3, khi nó sai, nó sẽ trả về

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

4. Vì vậy, chúng ta có thể dễ dàng gọi hàm như thế này

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

5 mà không gặp lỗi

Hãy thử chức năng trong ví dụ runkit này

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

6

Nếu bạn muốn có một chữ cái ngẫu nhiên trong bảng chữ cái, bạn có thể đạt được điều đó bằng cách này

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy thử chức năng trong ví dụ runkit này

[...Array(26)].map((_, i) => i); 
// returns [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

7

Thanks

Tôi hy vọng bạn đã học được điều gì đó mới hoặc được truyền cảm hứng để tạo ra điều gì đó mới sau khi đọc câu chuyện này. 🤗 Nếu vậy, hãy cân nhắc đăng ký qua email (cuộn lên đầu trang này) hoặc theo dõi tôi tại đây trên Hashnode

Bạn có biết rằng bạn có thể tự mình tạo một blog Nhà phát triển như blog này không? . 👍💰🎉🥳🔥

Nếu tôi để lại cho bạn câu hỏi hoặc điều gì đó để trả lời, hãy cuộn xuống và nhập tin nhắn cho tôi. Vui lòng gửi cho tôi một DM trên Twitter @DevByRayRay khi bạn muốn giữ nó ở chế độ riêng tư. DM của tôi luôn mở 😁

Làm cách nào để viết từ a đến Z trong JavaScript?

Làm cách nào để tạo một mảng bảng chữ cái trong JavaScript?

Làm cách nào để có được bảng chữ cái tiếp theo trong JavaScript?

Làm cách nào để chỉ in các bảng chữ cái trong JavaScript?