Thao tác với String trong JavaScript

Ngày đăng: 23/09/2020   -    Cập nhật: 05/05/2021


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

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ài học Thao tác với String trong JavaScript");
 


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
var thongBao = "Chào mừng bạn đến với" +
    "lập trình JavaScrip cơ bản";

// Sai
var thongBaos = "Chào mừng bạn đến với
lập trình JavaScript  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ống dòng với ký tự \
let thongBao = "Chào mừng bạn đến với \
        lập trình JavaScript cơ 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ối chuỗi trong JavaScript
let thuongHieu = "NIIT - ICT Hà Nội";
let linhVuc = " đào tạo lập trình viên";
document.write(thuongHieu + linhVuc);

// Kết quả: NIIT - ICT Hà Nội đào tạo lập trình viê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ước khi ép kiểu
let soA = 12;
document.write(typeof soA);

// Ép kiểu number sang chuỗi
soA = soA.toString();
// Kiểm tra xem kiểu dữ liệu của number
document.write(typeof soA);
 


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:


 


let thongBao = new String("Học thao tác với chuỗi trong JS");
 

 

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 ngay KHÓ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:



let thongBao = "Học thao tác với chuỗi trong JS";
let doDai = thongBao.length;
document.write("Độ dài của chuỗi là: " + 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ìm vị trí của một chuỗi
let thongBao = "Học thao tác với chuỗi trong JS";
let viTri = thongBao.indexOf("JS");
document.write("Vị trí của chuỗ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:


Ví dụ minh họa cách đánh chỉ mục trong JavaScript


  • 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ìm vị trí của một chuỗi
// mà nó xuất hiện cuối cùng trong một chuỗi
let thongBao = "JS Bài 6: Thao tác với chuỗi trong JS";
let viTri = thongBao.lastIndexOf("JS");
document.write("Vị trí của chuỗi 'JS' cuối cùng là: " + 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ìm chuỗi JS trong khoảng từ 10 đến hết chuỗi
let thongBao = "JS Bài 6: Thao tác với chuỗi trong JS";
let viTri = thongBao.indexOf("JS"10);
document.write(viTri);
// Kết quả: 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ìm chuỗi JS trong khoảng từ 0 đến 10
let thongBao = "JS Bài 6: Thao tác với chuỗi trong JS";
let viTri = thongBao.lastIndexOf("JS"10);
document.write(viTri);
// Kết quả: 0
 


Tuy nhiên, trong một số trường hợp indexOf()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()




let thongBao = "JS Bài 6: Thao tác với chuỗi trong JS";
// Tìm vị trí của số bất kỳ xuất hiện trong chuỗi
// Trả về vị trí của số đầu tiên tìm thấy
let viTri = thongBao.search("[0-9]");
document.write(viTri);
// Kết quả: 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:



let thongBao = "JS Bài 6: Thao tác với chuỗi trong JS";
let viTri = thongBao.search("JS");
document.write(viTri);
// Kết quả: 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(vitriBatDauviTriKetThuc);
 


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ắt ra một chuỗi sử dụng slice()
let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.slice(710);
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ắt 3 ký tự tính từ cuỗi chuỗi trở lại
let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.slice(-3);
document.write(ict);

// Kết quả: 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ắt một chuỗi từ vị trí thứ 7 đến 10 (không bao gồm 10)
let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.substring(710);
document.write(ict);

// Kết quả: ICT
 


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



let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.substring(-3);
document.write(ict);

// Kết quả: NIIT - ICT Hà 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ắt 3 ký tự tính từ vị trí thứ 7
let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.substr(73);
document.write(ict);

// Kết quả: ICT
 


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



// Cắt chuỗi tính từ vị trí thứ 7 đến hết
let thuongHieu = "NIIT - ICT Hà Nội";
let ict = thuongHieu.slice(7);
document.write(ict);

// Kết quả: ICT Hà 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:



// Thay thế một chuỗi
var cachDiTanGai = "Có tấm lòng";
var cachBiGaiTan = cachDiTanGai.replace("tấm lòng""BMW");
document.write(cachBiGaiTan);

// Kết quả: Có BMW
 


Khi đó chuỗi cachBiGaiTan sẽ 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ử đây là tên do người dùng nhập
let tenHocVien = "Đặng Ngọc anh";

// Bây giờ, chuyển nó thành viết HOA
let tenHocVien_HOA = tenHocVien.toUpperCase();
document.write(tenHocVien_HOA);

// Kết quả: ĐẶNG NGỌC ANH
 


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ử đây là tên do người dùng nhập
let tenHocVien = "Đặng Ngọc anh";

// Bây giờ, chuyển nó thành viết thường
let tenHocVien_HOA = tenHocVien.toLowerCase()
document.write(tenHocVien_HOA);

// Kết quả: đặng ngọc anh
 


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ử +.



let hoVaTenDem = "Đặng Ngọc";
let ten = "Anh";

let hoVaTen = 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é:




// Sau khi đã thực hiện concat()
document.write(hoVaTenDem);

// Kết quả: Đặng Ngọc
 


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



let hoVaTen = 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:




// input thừa khoảng trắng ở đầu, cuối chuỗi
let input = "       Đặng Ngọc Anh        ";
// Loại bỏ bằng phương thức trim()
let hoVaTen = input.trim();
document.write(hoVaTen);

// Kết quả: Đặng Ngọc Anh
 


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ụ:




let input = "Đặng Ngọc Anh";
let hoVaTen = input.charAt(0);
document.write(hoVaTen);

// Kết quả: Đ
 


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




let input = "Đặng Ngọc Anh";
let hoVaTen = input.charCodeAt(0);
document.write(hoVaTen);

// Kết quả: 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 []




let hoVaTen = "Đặng Ngọc Anh";
document.write(hoVaTen[0]);

// Kết quả: Đ
 


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():



let hoaQua = "Cam, Xoài, Ổi, Quýt";
// Tách chuỗi bằng dấu phảy
let mangHoaQua = hoaQua.split(",");
document.write(typeof mangHoaQua);

// Kết quả: 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.

Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!