Hàm substring Javascript

Các chuỗi mà ta phải xử lý không hề đơn giản một chút nào. Nó có thể đơn giản cũng có thể phức tạp mà ta cần phải sử lý cẩn thận nếu không muốn gặp vấn đề gì. Bài trước thì mình đã nói về chuỗi và các bạn cũng đã hiểu được phần nào về chuỗi và cấu tạo của nó rồi. Và bài này mình sẽ nói sâu thêm về chuỗi cũng như là để các bạn nắm được việc xử lý chuỗi.

Một chuỗi sẽ có phương thức và thuộc tính, với việt truy cập vào các phương thức và thuộc tính của chuỗi, ta có thể đảm bảo những công việc như: đếm số lượng ký tự chuỗi, chuyển toàn bộ ký tự chuỗi về dạng chữ in hoa, in thường, trích xuất chuỗi con bên trong chuỗi,… Tuy nhiên, để sử dụng được các phương thức và thuộc tính này thì trước hết bạn cần phải hiểu rõ khái niệm chỉ số của ký tự trong chuỗi và hãy xem lại ở bài trước nhé.

Các giá trị nguyên thủy (primitive values) như “Thành Nguyễn” , không thể có thuộc tính hay phương thức( vì nó không phải là đối tượng). Nhưng với JavaScript, các phương thức và thuộc tính cũng có sẵn cho các giá trị nguyên thủy, vì JavaScript xử lý các giá trị nguyên thủy như các đối tượng khi thực thi các phương thức và thuộc tính.

2. Đếm số lượng ký tự một chuỗi trong JavaScript

Để đếm số lượng ký tự của một chuỗi, ta truy cập vào thuộc tính length của chuỗi đó.

Ví dụ:

3. Cách nối chuỗi trong JavaScript

Để nối chuỗi string trong JS thì chúng ta sử dụng dấu + để gép hai chuỗi hoặc biến kiểu String Object lại với nhau.

Ví dụ: ta sẽ ghép 2 chuỗi lại với nhau rồi bán vào một biến bất kỳ:

var LT = "chào mừng bạn" + "đến với laptrinhtudau.com";
// hoặc một cách khác
var LT1 = "chào mừng bạn";
var LT2 = "đến với laptrinhtudau.com";
 
// Nối hai chuỗi
var LT = LT1 + LT2;
 document.write(LT);
4. Xử lý chuỗi trên nhiều dòng trong JavaScript

Khi bạn muốn Enter xuống hàng một chuỗi trong Javascript thì bắt buộc phải sử dụng dấu + để nối chuỗi, nếu không sẽ bị lỗi cú pháp.

Ví dụ: dùng dấu + để nối chuỗi:

// Đúng
var LT = "Chào mừng bạn đến với"
              + "laptrinhtudau.com";
 
// Sai
var LT = "Chào mừng bạn đến với
               laptrinhtudau.com";

Nếu bạn muốn viết gọn hơn thì sử dụng dấu \ để báo cho trình duyệt biết là có xuống hàng.

Ví dụ: dùng ký tự \ để khai báo chuỗi trên nhiều dòng:

var LT = "Chào mừng bạn đến với \
            laptrinhtudau.com";
// hoặc cũng có thể sử dụng dấu ''
5. Ép chuỗi trong JavaScript

Nếu bạn muốn ép một giá trị nào đó sang kiểu chuỗi thì có thể sử dụng cú pháp string.toString() 

Ví dụ:

// Trước khi chuyển đổi
var number = 12;
alert(typeof number);
 
// Sau khi chuyển đổi
number = number.toString();
alert(typeof number);

Từ khóa typeof var sẽ trả về kiểu dữ liệu của biến vars. Ngoài cách trên thì ta có thể sử dụng đối tượng chuỗi để tạo hoặc ép chuỗi nhưng ta sẽ học ở phần đối tượng sau.

6. Cắt chuỗi trong JavaScript

Để cắt một chuỗi trong Js ta có thể sử dụng một trong 3 hàm sau:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

Chú ý

Mình muốn lưu ý luôn với các bạn rằng trước khi cắt chuỗi thì tất cả các vị trí chuỗi đều bắt đầu từ 0 nên đừng nhầm lẫn nhé!

6.1. Hàm Slice()

Hàm slice() có 2 tham số truyền vào:

  • start: vị trí bắt đầu
  • end: vị trí kết thúc

Ví dụ:

var string = "Welcome to laptrinhtudau.com";
document.write("Chuỗi cần lấy là: " + string.slice(11, 23));

Nếu tham số truyền vào là số âm thì nó sẽ tính ngược lại, nghĩa là nó sẽ đếm từ cuối lên.

Ví dụ:

var string = "Welcome to laptrinhtudau.com";
document.write("Chuỗi cần lấy là: " + string.slice(-18, 23));

Nếu ta chỉ truyền vào tham số đầu tiên thì Js sẽ tự hiểu rằng vị trí end sẽ là vị trí cuối cùng của chuỗi mà ta lấy

Trong bài viết này, mình sẽ tổng hợp các hàm thường dùng và thông dụng nhất để thao tác với chuỗi (String) trong Javascript.

Nội dung của bài

  • 1 Lấy độ dài của chuỗi
  • 2 Tìm kiếm chuỗi string trong JS
    • 2.1 indexOf:
    • 2.2 lastIndexOf():
  • 3 Lấy một chuỗi con từ chuỗi ban đầu
    • 3.1 slice(start, end)
    • 3.2 substring(start, end):
    • 3.3 substr(start, length):
  • 4 Thay thế chuỗi
    • 4.1 replace(searchValue, replaceValue):
  • 5 Biến chuỗi ban đầu thành chuỗi in hoa hoặc chuỗi thường
    • 5.1 toUpperCase() and toLowerCase():
  • 6 Nối chuỗi
    • 6.1 concat():
  • 7 Lời kết

Lấy độ dài của chuỗi

const string = "Học lập trình javascript cùng yeulaptrinh.com";
console.log(string.length); // 45

Tìm kiếm chuỗi string trong JS

Ta thường dùng 1 trong các hàm sau để tìm kiếm chuỗi con trong chuỗi:

  • indexOf()
  • lastIndexOf()
  • search()

indexOf:

Hàm này sẽ trả kết quả về kết quả là vị trí xuât hiện đầu tiên của chuỗi (bắt đầu là vị trí 0), nếu không tìm thấy chuỗi con thì nó sẽ trả về 

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
0.

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22

lastIndexOf():

Hàm này sẽ trả về vị trí xuất hiện của chuỗi con cuối cùng và trả về 

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
0 nếu không tìm thấy.

const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38

search():

Hàm này có cách dùng tương tự hàm

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
2.

Lấy một chuỗi con từ chuỗi ban đầu

Để làm điều này, ta sử dụng một trong các hàm sau:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice(start, end)

Hàm nhận 2 tham số:

  • const string = "Chào mừng bạn đến với yeulaptrinh.vn";
    console.log(string.indexOf("yeulaptrinh.vn")); // 22
    3: vị trí bắt đầu
  • const string = "Chào mừng bạn đến với yeulaptrinh.vn";
    console.log(string.indexOf("yeulaptrinh.vn")); // 22
    4: vị trí kết thúc
const string = "Chào mừng bạn đến với yeulaptrinh.vn";

console.log(string.slice(0, 13));      // "Chào mừng bạn"
console.log(string.slice(-14, 36));    // "yeulaptrinh.vn"
console.log(string.slice(-14));        // "yeulaptrinh.vn"
console.log(string.slice(22));         // "yeulaptrinh.vn"

Hàm sẽ trả về chuỗi lấy từ vị trí

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3 tới
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
4 của chuỗi ban đầu. Nếu
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3 là số âm thì nó sẽ đếm từ cuối lên. Nếu bạn chỉ truyền một tham số đầu tiên thì nó sẽ tự hiểu vị trí 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
4 là vị trí cuối cùng của chuỗi ban đầu.

substring(start, end):

Giống như hàm

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
9 nhưng
const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
0 sẽ coi giá trị âm bằng 0 và luôn tính từ đầu chuỗi.

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.slice(0, 13));      // "Chào mừng bạn"

console.log(string.substring(-14, 13)) // "Chào mừng bạn"

Hàm

const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
1 sẽ đa dụng hơn
const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
0 trong trường hợp duyệt từ cuối chuỗi.

substr(start, length):

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.substr(5, 8));      // "mừng bạn"

Hàm 

const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
3 có hai tham số là 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3 và 
const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
5, trong đó 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3 là vị trí bắt đầu và 
const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
5 là số ký tự muốn lấy bắt đầu từ vị trí 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3. Nếu bạn truyền tham số 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.indexOf("yeulaptrinh.vn")); // 22
3 là số âm thì nó sẽ tính từ cuối trở lên, còn tham số 
const string = "Chào mừng bạn đến với yeulaptrinh.vn. yeulaptrinh.vn";
console.log(string.lastIndexOf("yeulaptrinh.vn")); // 38
5 phải luôn luôn là số dương.

Thay thế chuỗi

replace(searchValue, replaceValue):

Hàm sẽ thay thế searchValue bằng replaceValue và trả về chuỗi mới.

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.replace("yeulaptrinh.vn", "Yêu Lập Trình ^^!");
// "Chào mừng bạn đến với Yêu Lập Trình ^^!"

Biến chuỗi ban đầu thành chuỗi in hoa hoặc chuỗi thường

toUpperCase() and toLowerCase():

Trong Javascript, để chuyển chuỗi thành chữ hoa ta dùng hàm 

const string = "Chào mừng bạn đến với yeulaptrinh.vn";

console.log(string.slice(0, 13));      // "Chào mừng bạn"
console.log(string.slice(-14, 36));    // "yeulaptrinh.vn"
console.log(string.slice(-14));        // "yeulaptrinh.vn"
console.log(string.slice(22));         // "yeulaptrinh.vn"
1 và chuyển thành chữ thường ta dùng hàm 
const string = "Chào mừng bạn đến với yeulaptrinh.vn";

console.log(string.slice(0, 13));      // "Chào mừng bạn"
console.log(string.slice(-14, 36));    // "yeulaptrinh.vn"
console.log(string.slice(-14));        // "yeulaptrinh.vn"
console.log(string.slice(22));         // "yeulaptrinh.vn"
2.

const string = "Chào mừng bạn đến với yeulaptrinh.vn";
console.log(string.toUpperCase());    // CHÀO MỪNG BẠN ĐẾN VỚI YEULAPTRINH.VN
console.log(string.toLowerCase());    // chào mừng bạn đến với yeulaptrinh.vn

Nối chuỗi

concat():

Ngoài toán tử

const string = "Chào mừng bạn đến với yeulaptrinh.vn";

console.log(string.slice(0, 13));      // "Chào mừng bạn"
console.log(string.slice(-14, 36));    // "yeulaptrinh.vn"
console.log(string.slice(-14));        // "yeulaptrinh.vn"
console.log(string.slice(22));         // "yeulaptrinh.vn"
3 , ta có thể dùng hàm
const string = "Chào mừng bạn đến với yeulaptrinh.vn";

console.log(string.slice(0, 13));      // "Chào mừng bạn"
console.log(string.slice(-14, 36));    // "yeulaptrinh.vn"
console.log(string.slice(-14));        // "yeulaptrinh.vn"
console.log(string.slice(22));         // "yeulaptrinh.vn"
4 để nối 2 chuỗi lại với nhau:

const string1 = "Chào mừng bạn đến với";
const string2 = " yeulaptrinh.vn";
console.log(string1.concat(string2); // "Chào mừng bạn đến với yeulaptrinh.vn"

Lời kết

Trên đây là một vài hàm xử lý chuỗi quen thuộc trong Javascript, hy vọng sẽ giúp ích được các bạn trong quá trình thao tác và xử lý với String. Ngoài ra còn nhiều hàm với các chức năng khác nhau nữa, mọi người có thể tìm đọc thêm tại đây.