Hướng dẫn substring trong javascript

Phương thức string.substring() sẽ trích xuất nội dung của một chuỗi, nội dung trích xuất sẽ được xác định bằng hai tham số start và end. Phương thức sẽ trả về nội dung được trích xuất từ chuỗi gốc ban đầu.

Hướng dẫn substring trong javascript

Hướng dẫn substring trong javascript

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Nội dung được trích xuất sẽ là chuỗi kéo dài từ start đến end và không bao gồm phần tử end.

Nếu start > end, phương thức sẽ hoán đổi vị trị 2 tham số này. Ví dụ string.substring(4, 2) sẽ trở thành string.substring(2, 4).

Nếu start hoặc end nhỏ hơn 0, phương thức sẽ đặt giá trị cho nó thành 0.

Bài viết này được đăng tại [free tuts .net]

Phương thức string.substring() sẽ không làm thay đổi chuỗi nguồn ban đầu.

Cú pháp

Cú phápstring.substring(start, end)

Trong đó:

  • start là vị trị bắt đầu trích xuất.
  • end là vị trí kết thúc, trích xuất sẽ không bao gồm phần tử end.

Cách sử dụng

Ví dụ: Sử dụng phương thức string.substring() để trích xuất nội dung chuỗi.



    
        
    
    
        

Học lập trình miễn phí tại freetuts.net

Kết quả

freetuts.net la blog

Tham khảo: php.net

Phương thức substring() trong JavaScript

Phương thức substring() được dùng để:

"Trích xuất một chuỗi ký tự con nằm giữa hai chỉ số được chỉ định trong chuỗi cha"

Cú pháp:

string.substring(start, end)

Trong đó:

  • start là chỉ số của ký tự đầu tiên mà bạn muốn bắt đầu việc trích xuất.
  • end là chỉ số của ký tự cuối cùng mà bạn muốn kết thúc việc trích xuất.

1) Giá trị trả về của phương thức substring() là một chuỗi.

- Chuỗi được trả về không bao gồm ký tự ở chỉ số end.

- Dưới đây là một ví dụ minh họa để giúp bạn dễ hình dung ra chuỗi được trích xuất trong chuỗi gốc là phần nào: "Tài liệu học HTML".substring(4,14)

Chỉ số0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
ChuỗiT à i l i u h c H T M L

2) Phương thức substring() không làm thay đổi chuỗi gốc.


Xem ví dụ

Một số trường hợp cần lưu ý khi sử dụng phương thứ substring():

  • Trường hợp 1: Nếu giá trị của tham số start lớn hơn giá trị của tham số end thì trình duyệt sẽ tự động hoán vị hai tham số đó.
  • Trường hợp 2: Nếu phương thức substring() chỉ có một tham số duy nhất thì chuỗi được trích xuất sẽ bắt đầu từ ký tự ở tham số đó đến hết chuỗi gốc.


Xem ví dụ


Xem ví dụ

Hướng dẫn sử dụng javascript substring để cắt chuỗi trong JavaScript. Chúng ta sử dụng cả phương thức substring() lẫn slice() để cắt chuỗi trong JavaScript mà không làm thay đổi chuỗi ban đầu. Hai phương thức này có cách hoạt động phần lớn là giống nhau, và chỉ khác nhau khi chỉ định giá trị index làm phạm vi cắt mà thôi. Về slice() thì chúng ta đã học ở bài trước rồi và trong bài này, ngoài việc học được cách sử dụng javascript substring thì chúng ta cũng sẽ làm rõ sự khác nhau của 2 phương pháp này trong bài học này.

  • Xem thêm: Cắt chuỗi trong JavaScript (slice)

Cắt chuỗi tại phạm vi chỉ định trong JavaScript bằng phương thức substring()

Chúng ta cắt chuỗi trong JavaScript bằng cách sử dụng javascript substring để copy một phạm vi cần cắt ra từ chuỗi ban đầu và thu về kết quả dưới dạng một chuỗi mới. Phép cắt này không làm thay đổi chuỗi ban đầu.

Hướng dẫn substring trong javascript

Chúng ta chỉ định phạm vi chuỗi con cần cắt ra từ chuỗi ban đầu làm đối số của phương thức substring() với cú pháp sau đây:

string.substring( index bắt đầu , index kết thúc )

Trong đó:

  • string là chuỗi ban đầu
  • index bắt đầuindex kết thúc là phạm vi chuỗi cần cắt từ trong chuỗi ban đầu

Cú pháp và cách sử dụng của substring() khá giống với slice(). Chúng ta cũng có thể sử dụng cả các giá trị index âm lẫn index dương để chỉ định index bắt đầuindex kết thúc.

Tuy nhiên cần chú ý là khác với phương thức slice() thì các giá trị index chỉ định nếu nhỏ hơn 0 (index âm) hoặc lớn hơn str.length (vượt quá độ dài chuỗi) thì đều được chuyển thành giá trị mặc định là bằng 0.

Chúng ta cũng có thể lược bỏ 2 đối số index bắt đầuindex kết thúc. Nếu đối số index bắt đầu được rút gọn thì JavaScript sẽ mặc định coi nó bằng 0, và nếu index kết thúc được rút gọn thì JavaScript sẽ mặc định coi nó bằng độ dài chuỗi ban đầu (tính bằng str.length).

Lại nữa, phương thức substring() sẽ trả về một chuỗi mới có phạm vi từ ký tại index bắt đầu cho đến ký tự ở phía trước index kết thúc. Nói cách khác thì ký tự tại index kết thúc sẽ không bao gồm trong kết quả phép cắt. Ví dụ cụ thể:

const str = "abc123";
console.log(str.substring(1, 2));
console.log(str.substring(3, 6));

Bạn có thể thấy ký tự tại vị trí index kết thúc sẽ không nằm trong kết quả trả về rồi phải không nào.

Và do chuỗi con được cắt ra không bao gồm ký tự ở index kết thúc, nên nếu muốn lấy cả ký tự tại index kết thúc thì khi chỉ định index kết thúc, chúng ta cần cộng thêm 1 đơn vị vào index kết thúc đó.

Sau đây, chúng ta sẽ cùng xem các cách sử dụng nâng cao để cắt chuỗi trong JavaScript bằng phương thức substring() nhé.

Cắt chuỗi trong JavaScript bằng phương thức substring() rút gọn

Rút gọn tất cả đối số

Chúng ta có thể lược bỏ cả 2 đối số index bắt đầuindex kết thúc để sử dụng phương thức substring() rút gọn với cú pháp sau đây:

string.substring()

Ví dụ:

const str = "abc123";
console.log(str.substring());

Do 2 đối số này được rút gọn nên JavaScript sẽ mặc định coi index bắt đầu = 0 , và index kết thúc = độ dài chuỗi.

Khi đó JavaScript sẽ hiểu phép cắt ở trên tương tự như sau:

const str = "abc123";
console.log(str.substring(0, str.length));

Kết quả là chuỗi được cắt ra sẽ được cắt từ đầu đến cuối chuỗi ban đầu, khiến kết quả thu về sẽ bằng chính với chuỗi ban đầu như ở trên.

Rút gọn index kết thúc

Chúng ta cũng có thể lược bỏ đối số index kết thúc để và chỉ giữ lại index bắt đầu khi sử dụng phương thức substring() với cú pháp sau đây:

string.substring( index bắt đầu )

Khi lược bỏ index kết thúc, về mặc định thì JavaScript sẽ tự coi index kết thúc lúc này bằng chính độ dài của chuỗi (tính bằng string.length).

Ví dụ cụ thể:

const str = "abc123";

console.log(str.substring(2));


console.log(str.substring(3));


console.log(str.substring(4));

Lưu ý là chúng ta có thể lược bỏ index kết thúc hoặc là lược bỏ cùng lúc cả index bắt đầu và index kết thúc, tuy nhiên chúng ta không thể lược bỏ chỉ index bắt đầu khi sử dụng phương thức substring() để cắt chuỗi trong JavaScript.

Cắt chuỗi trong JavaScript bằng phương thức substring() với index âm hoặc index lớn hơn str.length

Chúng ta có thể sử dụng index âm để chỉ định các đối số index bắt đầuindex kết thúc. Nếu chỉ định chúng bằng giá trị âm thì chúng sẽ được chuyển sang giá trị mặc định bằng 0.

Tương tự thì nếu chúng ta chỉ định index bởi một giá trị lớn hơn str.length (nằm ngoài phạm vi index của chuỗi) thì index này cũng sẽ được chuyển sang giá trị mặc định bằng 0.

Ví dụ, chúng ta chỉ định index bắt đầu bằng một giá trị index âm như sau:

const str = "abc123";
console.log(str.substring(-2, 5));

console.log(str.substring(-4, 4));

Tương tự, chúng ta cũng có thể chỉ định index kết thúc bằng giá trị âm như sau:

const str = "abc123";
console.log(str.substring(-4, -2));


console.log(str.substring(-3, -1));

Hoặc là khi rút gọn index bắt đầu và chỉ định index kết thúc bằng giá trị lớn hơn str.length thì một chuỗi trống cũng được trả về.

const str = "abc123";
console.log(str.substring(100));

Lưu ý là khi chỉ định index bắt đầu là một số dương và index kết thúc là một số âm thì kết quả sẽ không phải là một chuỗi trống như ở trên.

const str = "abc123";
console.log(str.substring(4, -2));


console.log(str.substring(3, -1));

Tương tự khi chúng ta không rút gọn index bắt đầu và chỉ định một index lớn hơn str.length thì kết quả trả về cũng không phải là một chuỗi trống.

const str = "abc123";
console.log(str.substring(2, 100));

Lý do là sau khi chuyển index thành giá trị 0 như trên thì phép cắt lúc này sẽ chuyển sang trường hợp khi mà index bắt đầu lại nhỏ hơn index kết thúc), và chúng ta sẽ cùng làm rõ trường hợp này ngay sau đây.

Cắt chuỗi trong JavaScript bằng phương thức substring() khi index bắt đầu nhỏ hơn index kết thúc

Trong trường hợp chỉ định index bắt đầu nhỏ hơn index kết thúc, hoặc là khi 2 index này bằng nhau, giá trị 2 index này sẽ được hoán đổi cho nhau và tiếp tục thực hiện phép cắt chuỗi trong JavaScript.

Ví dụ cụ thể:

let prog = 'JavaScript';
let sub;

sub = prog.substring(2, 2);
console.log(sub);

sub = prog.substring(4, 15);
console.log(sub);


sub = prog.substring(3, -5);
console.log(sub);

Sự khác biệt giữa substring() và slice() trong JavaScript

Thông qua các bài phân tích của Kiyoshi về substring() và slice() thì chúng ta có thể nhận thấy ở chúng có khá nhiều điểm tương đồng. Chúng đều được sử dụng để cắt một phạm vi từ trong chuỗi JavaScript mà không làm thay đổi chuỗi ban đầu. Và cú pháp cũng như cách sử dụng của chúng tương đối là giống nhau.

Tuy nhiên ở giữa chúng vẫn có những sự khác biệt nhất định trong việc chỉ định giá trị index. Sự khác biệt giữa substring() và slice() trong JavaScript có thể được khái quát như sau:

  1. Với index âm, slice() sẽ chuyển nó về dạng str.length + index), còn javascript string sẽ chuyển nó thành giá trị mặc định bằng 0. Ví dụ:

    console.log(str.slice(-2, 5)); 

    console.log(str.substring(-2, 5));

  2. Với index vượt quá phạm vi index của chuỗi (lớn hơn cả độ dài chuỗi ban đầu) thì slice() sẽ chuyển nó về dạng str.length, còn javascript substring sẽ chuyển nó thành giá trị mặc định bằng 0. Ví dụ:

    const str = "abc123";
    console.log(str.slice(2, 100));

    console.log(str.substring(2, 100));

  3. Với index bắt đầu lớn hơn index kết thúc thì slice() sẽ trả về chuỗi trống, trong khi substring() sẽ hoán đổi 2 giá trị này. Ví dụ:

    const str = "abc123";
    console.log(str.slice(5, 2));

    console.log(str.substring(5, 2));

  • Xem thêm: Cắt chuỗi trong JavaScript (slice)

Ứng dụng javascript substring để thay thế ký tự trong chuỗi JavaScript

Mặc dù Kiyoshi đã giới thiệu các cách tốt nhất để thay thế ký tự trong chuỗi JavaScript bằng phương thức replace() trong bài viết Thay thế ký tự trong chuỗi JavaScript (replace) rồi, tuy nhiên thì bằng cách ứng dụng substring() thì chúng có thêm một lựa chọn nữa để thực hiện việc này.

Ý tưởng ở đây đó là, chúng ta sử dụng substring để cắt chuỗi ban đầu thành 2 phần, 1 phần là từ đầu tới vị trí ký tự cần thay thế và phần còn lại là từ vị trí ký tự cần thay thế đến cuối chuỗi ban đầu. Sau đó thì nối 2 chuỗi đó lại cùng với ký tự thay thế ở giữa chúng là xong.

Để tìm ra vị trí của ký tự cần thay thế trong chuỗi ban đầu, chúng ta có thể sử dụng vòng lặp for, hoặc các phương thức có sẵn khác như indexOf() hoặc là lastIndexOf().

Ví dụ, chúng ta có thể thay thế dấu gạch dưới cuối cùng trong chuỗi JavaScript bằng substring() như sau:

let str = "a_b_c_d_"
let otherchar ="#"
var pos = str.lastIndexOf('_');
str = str.substring(0,pos) + otherchar + str.substring(pos+1);
console.log(str);

Hoặc là sử dụng một vòng lặp for để tìm ra vị trí ký tự cần so sánh để thay thế nó, giống như ví dụ sử dụng tại developer.mozilla như sau:

function replaceString(oldS, newS, fullS, n) {
let count=0;
for (let i = 0; i < fullS.length; ++i) {


if (fullS.substring(i, i + oldS.length) == oldS) {
count += 1;
if (count == n){
fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length)
}
}
}
console.log(fullS)
return fullS
}

replaceString('World', 'Web', 'Brave New World World Even', 2)


replaceString('oo','ABC','Good School',2)

  • Xem thêm: Thay thế ký tự trong chuỗi JavaScript (replace)

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách tính cắt chuỗi trong JavaScript bằng phương thức substring() rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
Hướng dẫn substring trong javascript

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.