Chèn Ký Tự Vào Chuỗi Trong JavaScript

- Chuỗi (hay còn gọi được là chuỗi ký tự) là một dãy các ký tự.

Nội dung chính Show

• 2) Cách viết một chuỗi
• 3) Cách nối các chuỗi lại với nhau
• 4) Cách ngắt ký tự xuống dòng
• 5) Các ký tự đặc biệt
• 6) Đếm số lượng ký tự trong chuỗi
• 1. Nối chuỗi trong JavaScript
• 2. Ép kiểu chuỗi trong JS
• 3. Các phương thức thao tác với chuỗi trong JS
• 3.1. Đếm độ dài của chuỗi trong JS
• 3.2. Tìm kiếm một chuỗi trong chuỗi
• 3.3. Cắt ra một chuỗi với slice()
• 3.4. Cắt ra một chuỗi với substring()
• 3.5. Cắt ra một chuỗi với substr()
• 3.7. Thay thế một chuỗi với replace()
• 3.8. Chuyển đổi chuỗi HOA - thường
• 3.9. Nối chuỗi với phương thức concat()
• 3.10. Loại bỏ khoảng trắng ở đầu và cuỗi chuỗi với phương thức trim()
• 3.11. Lấy ký tự ở vị trí chỉ định bằng charAt()
• 3.12. Lấy mã ký tự ở vị trí được chỉ định
• 3.12. Truy cập chuỗi như một mảng
• 3.13. Chuyển đổi một chuỗi thành một mảng
• Tổng kết
• Video liên quan

- Ví dụ:

Tai	Chuỗi gồm 3 ký tự
Tai lieu	Chuỗi gồm 8 ký tự
Tai lieu hoc	Chuỗi gồm 12 ký tự
Tai lieu hoc JavaScript	Chuỗi gồm 23 ký tự
Chuỗi rỗng

Chuỗi mà không chứa ký tự thì được gọi là chuỗi rỗng

2) Cách viết một chuỗi

- Trong JavaScript, chuỗi phải được đặt bên trong cặp dấu nháy kép " " hoặc cặp dấu nháy đơn ' '

Ví dụ:

Xem ví dụ

- Hai dấu dùng để đặt xung quanh chuỗi phải cùng một loại, nếu khác loại sẽ dẫn đến sai cú pháp làm chương trình bị lỗi.

Ví dụ:

- Nếu chuỗi được đặt bên trong cặp dấu nháy kép thì chuỗi không được chứa ký tự là dấu nháy kép (tuy nhiên chuỗi được chứa ký tự là dấu nháy đơn).

- Tương tự, nếu chuỗi được đặt bên trong cặp dấu nháy đơn thì chuỗi không được chứa ký tự là dấu nháy đơn (tuy nhiên chuỗi được chứa ký tự là dấu nháy kép).

Ví dụ:

3) Cách nối các chuỗi lại với nhau

- Ta có thể nối hai hoặc nhiều chuỗi lại với nhau thành một chuỗi bằng cách sử dụng toán tử +

Ví dụ:

Xem ví dụ

- Ở ví dụ trên, giá trị của biến a là một chuỗi được nối từ ba chuỗi Tài liệu học JavaScript và cả ba chuỗi đều được đặt bên trong cặp dấu nháy kép. Điều đó không có nghĩa là để nối các chuỗi lại với nhau thì các chuỗi phải có cùng một loại dấu bao xung quanh, mà chỉ cần mỗi chuỗi viết đúng theo quy tắc là được.

Ví dụ:

Xem ví dụ

- Nếu giá trị của biến là một chuỗi thì biến đó cũng có thể sử dụng trong việc nối chuỗi.

Ví dụ:

Xem ví dụ

4) Cách ngắt ký tự xuống dòng

- Đôi khi viết mã lệnh mà một chuỗi quá dài sẽ dẫn đến việc khó quan sát. Để khắc phục vấn đề này, ta có thể ngắt ký tự trong chuỗi xuống dòng bớt bằng cách đặt dấu gạch chéo ngược \ ở chỗ muốn ngắt xuống dòng.

Ví dụ:

Xem ví dụ

- Nếu là trường hợp nối chuỗi thì không cần dùng đến dấu gạch chéo ngược.

Ví dụ:

Xem ví dụ

5) Các ký tự đặc biệt

- Ký tự đặc biệt là những ký tự mà khi nó được viết vào bên trong một chuỗi sẽ có nguy cơ làm ảnh hưởng đến cú pháp của chuỗi, khiến câu lệnh bị lỗi.

- Ví dụ, trong phần Cách viết một chuỗi chúng tôi có nói đến việc "nếu chuỗi được đặt bên trong cặp dấu nháy kép thì chuỗi không được chứa ký tự là dấu nháy kép" hoặc "nếu chuỗi được đặt bên trong cặp dấu nháy đơn thì chuỗi không được chứa ký tự là dấu nháy đơn", bởi vì chúng là những ký tự đặc biệt.

- Dưới đây là ví dụ minh họa phân tích cho bạn thấy tại sao !?

- Chúng ta có một giải pháp để có thể viết được ký tự đặc biệt trong chuỗi, đó chính là đặt dấu gạch chéo ngược phía trước ký tự đặc biệt.

Ví dụ:

Xem ví dụ

- Dưới đây là ba ký tự đặc biệt thường được sử dụng nhất trong chuỗi:

Ký tự đặc biệt	Cách viết trong chuỗi
"	\"
'	\'
\	\\

6) Đếm số lượng ký tự trong chuỗi

- Chúng ta có thể xác định được số lượng ký tự trong một chuỗi bằng cách truy cập vào thuộc tính length của chuỗi đó.

Ví dụ:

Xem ví dụ

Mục Lục

• 1. Nối chuỗi trong JavaScript
• 2. Ép kiểu chuỗi trong JS
• 3. Các phương thức thao tác với chuỗi trong JS
• Tổng kết

Xin chào bạn, mình lại gặp nhau rồi. Hôm nay mình sẽ nói rõ hơn về string, cách thao tác với string trong JavaScript. Đây là kỹ năng rất quan trọng nên hãy chú ý nhé.

Thao tác với String trong JavaScript

1. Nối chuỗi trong JavaScript

Để cho code đọc dễ hiểu, các lập trình viên thường tránh việc code quá dài 80 ký tự trên một dòng. Nếu một câu lệnh JavaScript thì bạn có thể xuống dòng, trình biên dịch sẽ bỏ qua điều này.

document

.write("BàihọcThaotácvớiStringtrongJavaScript");

Nhưng nếu chuỗi dài quá không thể viết trên một dòng thì sao? Cách xử lý là ta sẽ xuống dòng và dùng ký tự nối chuỗi:

//Đúng

varthongBao="Chàomừngbạnđếnvới"+

"lậptrìnhJavaScripcơbản";

//Sai

varthongBaos="Chàomừngbạnđếnvới

lậptrìnhJavaScriptcơbản";

Ngoài ra, bạn cũng có thể sử dụng dấu \ để cho trình biên dịch biết là bạn muốn xuống dòng trong Javascript.

//Xuốngdòngvớikýtự\

letthongBao="Chàomừngbạnđếnvới\

lậptrìnhJavaScriptcơbản";

document.write(thongBao);

Còn về phương pháp nối chuỗi cơ bản thì bạn cũng đã được học ở bài toán tử trong JavaScript rồi đấy:

//NốichuỗitrongJavaScript

letthuongHieu="NIIT-ICTHàNội";

letlinhVuc="đàotạolậptrìnhviên";

document.write(thuongHieu+linhVuc);

//Kếtquả:NIIT-ICTHàNộiđàotạolậptrìnhviên

2. Ép kiểu chuỗi trong JS

Nếu bạn muốn ép kiểu một giá trị của một biến nào đó sang kiểu chuỗi thì có thể sử dụng cú pháp sau:

bienA.toString();

Ví dụ ép kiểu chuỗi trong JS:

//Trướckhiépkiểu

letsoA=12;

document.write(typeofsoA);

//Épkiểunumbersangchuỗi

soA=soA.toString();

//Kiểmtraxemkiểudữliệucủanumber

document.write(typeofsoA);

Ngoài cách trên thì bạn có thể sử dụng đối tượng String để tạo chuỗi (mình sẽ nói rõ hơn ở bài Object) nên trước nó phải có từ khóa new đặt ở trước. Như thế này:

letthongBao=newString("HọcthaotácvớichuỗitrongJS");

3. Các phương thức thao tác với chuỗi trong JS

Trong lập trình web, chúng ta sẽ là việc rất nhiều với chuỗi như đếm độ dài, cắt chuỗi, chuyển đổi, tìm kiếm... đây các là nhiệm vụ thường xuyên nên nếu tự viết phương thức thì rất vất vả. > Tham khảo ngayKHÓA HỌC LẬP TRÌNH WEB(Full Stack) nếu như bạn quyết tâm theo học lập trình web bài bản từ đầu. > Hoặc đi chuyên sâu về Front end với KHÓA HỌC FRONT END (React.js) dưới sự hướng dẫn của chuyên gia doanh nghiệp. May mắn là, JavaScript hỗ trợ sẵn một số phương thức giúp chúng ta thao tác với chuỗi nhanh hơn, tiện lợi hơn.

3.1. Đếm độ dài của chuỗi trong JS

Ta sử dụng thuộc tính lengthđể trả về độ dài của một chuỗi trong JavaScript:

letthongBao="HọcthaotácvớichuỗitrongJS";

letdoDai=thongBao.length;

document.write("Độdàicủachuỗilà:"+doDai);

3.2. Tìm kiếm một chuỗi trong chuỗi

Phương thức indexOf() trả về chỉ mục (vị trí) của chuỗi trùng khớp được tìm thấy đầu tiên:

//Tìmvịtrícủamộtchuỗi

letthongBao="HọcthaotácvớichuỗitrongJS";

letviTri=thongBao.indexOf("JS");

document.write("Vịtrícủachuỗi'JS'là:"+viTri);

JavaScript sẽ đếm vị trí từ số 0 (Giống như các ngôn ngữ lập trình khác), như hình minh họa dưới đây:

• 0 là vị trí đầu tiên của chuỗi

• 1, 2, 3…. là các vị trí tiếp theo trong chuỗi.

Phương thức lastIndexOf() trả về vị trí sau cùng của chuỗi được tìm thấy trong chuỗi gốc.

//Tìmvịtrícủamộtchuỗi

//mànóxuấthiệncuốicùngtrongmộtchuỗi

letthongBao="JSBài6:ThaotácvớichuỗitrongJS";

letviTri=thongBao.lastIndexOf("JS");

document.write("Vịtrícủachuỗi'JS'cuốicùnglà:"+viTri);

Cả hai phương thức này sẽ tả về -1 nếu không tìm thấy chuỗi cần tìm trong chuỗi gốc. Cả hai phương thức đều chấp nhận tham số thứ 2 để bạn có thể tùy chọn tìm kiếm. Phương thức indexOf() sẽ tìm kiếm từ tham số thứ 2 đến hết chuỗi:

//TìmchuỗiJStrongkhoảngtừ10đếnhếtchuỗi

letthongBao="JSBài6:ThaotácvớichuỗitrongJS";

letviTri=thongBao.indexOf("JS",10);

document.write(viTri);

//Kếtquả:35

Phương thức lastIndexOf() sẽ tìm kiếm từ 0 đến tham số thứ 2 mà bạn truyền vào:

//TìmchuỗiJStrongkhoảngtừ0đến10

letthongBao="JSBài6:ThaotácvớichuỗitrongJS";

letviTri=thongBao.lastIndexOf("JS",10);

document.write(viTri);

//Kếtquả:0

Tuy nhiên, trong một số trường hợp indexOf() và lastIndexOf() lại không có ưu thế, như là tìm kiếm với biểu thức chính quy (ReExp). Chính vì thế, chúng ta có phương thức search()

letthongBao="JSBài6:ThaotácvớichuỗitrongJS";

//Tìmvịtrícủasốbấtkỳxuấthiệntrongchuỗi

//Trảvềvịtrícủasốđầutiêntìmthấy

letviTri=thongBao.search("[0-9]");

document.write(viTri);

//Kếtquả:7

Còn về tìm kiếm thông thường thì phương thức search() vẫn có thể làm tốt tương tự indexOf hoặc lastIndexOf:

letthongBao="JSBài6:ThaotácvớichuỗitrongJS";

letviTri=thongBao.search("JS");

document.write(viTri);

//Kếtquả:0

Chỉ có điều là phương thức search() không chấp nhận đối số thứ 2 làm vị trí bắt đầu tìm kiếm (Có thể truyền vào, không lỗi biên dịch nhưng không có tác dụng)

3.3. Cắt ra một chuỗi với slice()

Phương thức slice() sẽ cắt một chuỗi con trong một chuỗi trả về chuỗi con đó trong một chuỗi mới. Phương thức này cần 2 tham số: (vị trí) chỉ số bắt đầu và (vị trí) chỉ số kết thúc.

string.slice(vitriBatDau,viTriKetThuc);

Ví dụ, cắt ra một chuỗi từ vị trí thứ 7 đến 10 (không bao gồm ký tự ở vị trí thứ 10):

//Cắtramộtchuỗisửdụngslice()

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.slice(7,10);

document.write(ict);

Kết quả:

ICT

Phương thức này cũng chấp nhận số âm, vị trí sẽ được đếm từ phía cuối chuỗi. Ví dụ:

//Cắt3kýtựtínhtừcuỗichuỗitrởlại

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.slice(-3);

document.write(ict);

//Kếtquả:Nội

3.4. Cắt ra một chuỗi với substring()

Phương thức substring()cũng thực hiện cắt chuỗi tương tự như slice(). Điều khác là substring() sẽ không nhận vào chỉ số âm. Ví dụ:

//Cắtmộtchuỗitừvịtríthứ7đến10(khôngbaogồm10)

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.substring(7,10);

document.write(ict);

//Kếtquả:ICT

Nếu bạn cố tình truyền vào chỉ số âm:

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.substring(-3);

document.write(ict);

//Kếtquả:NIIT-ICTHàNội

substring() sẽ không trả về kết quả như bạn mong muốn.

3.5. Cắt ra một chuỗi với substr()

Phương thức substr() cũng tương tự như slice() là dùng để cắt ra một chuỗi mới từ chuỗi đã cho. Điểm khác của substr() là chỉ số thứ hai quy định độ dài của phần được trích xuất (không phải là vị trí kết thúc như slice())

//Cắt3kýtựtínhtừvịtríthứ7

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.substr(7,3);

document.write(ict);

//Kếtquả:ICT

Còn nếu ta bỏ qua tham số thứ hai thì nó sẽ cắt đến hết chuỗi:

//Cắtchuỗitínhtừvịtríthứ7đếnhết

letthuongHieu="NIIT-ICTHàNội";

letict=thuongHieu.slice(7);

document.write(ict);

//Kếtquả:ICTHàNội

3.7. Thay thế một chuỗi với replace()

Phương thức replace() thay thế một giá trị được chỉ định bằng một giá trị khác trong một chuỗi:

//Thaythếmộtchuỗi

varcachDiTanGai="Cótấmlòng";

varcachBiGaiTan=cachDiTanGai.replace("tấmlòng","BMW");

document.write(cachBiGaiTan);

//Kếtquả:CóBMW

Khi đó chuỗi cachBiGaiTansẽ có giá trị là: Có BMW Mặc định thì hàm replace() chỉ thay thế giá trị chỉ định được tìm thấy đầu tiên. Và hàm này cũng phân biệt chuỗi viết hoa và viết thường. Có nghĩa là, bạn phải truyền chuỗi cần thay thế chính xác 100% nếu muốn thay thế đúng.

3.8. Chuyển đổi chuỗi HOA - thường

Một thực tiễn tốt trong khi thiết kế các chức năng lấy dữ liệu từ người dùng, nếu bạn muốn chuỗi này khi hiển thị ra là chữ HOA. Thì tốt nhất, luôn thực hiện chuyển đổi nó thành chữ viết HOA qua phương thức toUpperCase() (Chứ đừng yêu cầu người dùng nhập chữ viết HOA)

//Giảsửđâylàtêndongườidùngnhập

lettenHocVien="ĐặngNgọcanh";

//Bâygiờ,chuyểnnóthànhviếtHOA

lettenHocVien_HOA=tenHocVien.toUpperCase();

document.write(tenHocVien_HOA);

//Kếtquả:ĐẶNGNGỌCANH

Ngược lại, bạn cũng có thể chuyển đổi tất cả chuỗi thành chữ viết thường với phương thức toLowerCase()

//Giảsửđâylàtêndongườidùngnhập

lettenHocVien="ĐặngNgọcanh";

//Bâygiờ,chuyểnnóthànhviếtthường

lettenHocVien_HOA=tenHocVien.toLowerCase()

document.write(tenHocVien_HOA);

//Kếtquả:đặngngọcanh

3.9. Nối chuỗi với phương thức concat()

Phương thức concat() trong JavaScript này kết hợp hay hay nhiều chuỗi với nhau. Có thể hiểu là cộng chuỗi tương tự như sử dụng toán tử +.

lethoVaTenDem="ĐặngNgọc";

letten="Anh";

lethoVaTen=hoVaTenDem.concat("",ten);

document.write(hoVaTen);

Phương thức concat() này lấy các tham số được truyền vào nối vào sau chuỗi hoVaTenDem và trả về kết quả. Tuy nhiên, nó không làm thay đổi hoVaTenDem, lúc này, thử kiểm tra lại giá trị của hoVaTenDem xem sao nhé:

//Saukhiđãthựchiệnconcat()

document.write(hoVaTenDem);

//Kếtquả:ĐặngNgọc

Cách của phương thức concat() tương đương với:

lethoVaTen=hoVaTenDem+""+ten;

3.10. Loại bỏ khoảng trắng ở đầu và cuỗi chuỗi với phương thức trim()

Khi lấy dữ liệu từ người dùng, bởi vì người dùng thường sẽ nhập thừa dấu cách (space) ở đầu và cuối chuỗi... Do đó, chúng ta cần phải loại bỏ nó trước khi sử dụng. Phương thức trim() này loại bỏ những khoảng trắng thừa ở cả hai đầu của chuỗi theo cách như sau:

//inputthừakhoảngtrắngởđầu,cuốichuỗi

letinput="ĐặngNgọcAnh";

//Loạibỏbằngphươngthứctrim()

lethoVaTen=input.trim();

document.write(hoVaTen);

//Kếtquả:ĐặngNgọcAnh

3.11. Lấy ký tự ở vị trí chỉ định bằng charAt()

Phương thức charAt() này thì đơn giản là sẽ trả về một ký tự nằm ở vị trí chỉ định Ví dụ:

letinput="ĐặngNgọcAnh";

lethoVaTen=input.charAt(0);

document.write(hoVaTen);

//Kếtquả:Đ

3.12. Lấy mã ký tự ở vị trí được chỉ định

Phương thức charCodeAt() này khác ở phương thức chartAt() ở chỗi là nó sẽ trả về mã unicode của một ký tự nằm ở vị trí chỉ định trong chuỗi chớ không phải là một ký tự. Phương thức trả về mã UTF-16 dưới dạng một số nguyên trong khoảng từ 0 -> 65535

letinput="ĐặngNgọcAnh";

lethoVaTen=input.charCodeAt(0);

document.write(hoVaTen);

//Kếtquả:272

3.12. Truy cập chuỗi như một mảng

Trong phiên bản ECMAScript 5 (phiên bản 2009), JavaScript đã cho phép truy cập chuỗi tương tự cách truy cập mảng. Chúng ta sẽ sử dụng ký hiệu []

lethoVaTen="ĐặngNgọcAnh";

document.write(hoVaTen[0]);

//Kếtquả:Đ

Một số lưu ý:

• Nó làm các chuỗi giống như một mảng (sẽ được học trong bài sau) nhưng bản chất của chúng không phải là mảng.

• Nếu không ký tự nào được tìm thấy, sẽ trả về underfined, trong khi charAt() trả về một chuỗi rỗng.

• Lệnh gán: hoVaTen[0] = "T"sẽ không báo lỗi, nhưng không gán được (không có tác dụng làm thay đổi chuỗi).

3.13. Chuyển đổi một chuỗi thành một mảng

Nếu bạn muốn thao tác chuỗi như mảng thực thụ thì bạn có thể chuyển chuỗi thành mảng bằng phương thức split():

lethoaQua="Cam,Xoài,Ổi,Quýt";

//Táchchuỗibằngdấuphảy

letmangHoaQua=hoaQua.split(",");

document.write(typeofmangHoaQua);

//Kếtquả:object

> Lưu ý: Mảng là một đối tượng đặc biệt nên kiểu của nó sẽ là object. Để nhìn rõ kiểu của nó bạn có thể sử dụng console.log() để log mangHoaQua ra màn hình console:

console.log(mangHoaQua);

Kết quả ta được:

['Cam', 'Ổi', 'Xoài', 'Quýt']

* Chúng ta sẽ học kỹ về mảng ở trong bài sau.

Tổng kết

Vậy là mình vừa cùng bạn học một số cách thao tác với chuỗi trong JavaScript, bạn sẽ làm việc với chuỗi rất nhiều nên hãy cố gắng luyện tập. Trực tiếp làm lại các ví dụ nhiều lần, biến đổi đi đôi chút để xem kết quả thay đổi thế nào, thay đổi như thế nào thì lỗi? thay đổi thế nào thì không lỗi? thay đổi thế nào để có kết quả đúng mong đợi? ... Chỉ có như thế bạn mới hiểu thật rõ kỹ thuật thao tác với chuỗi trong JavaScript. Hẹn gặp lại bạn ở bài học JavaScript tiếp theo.