Làm việc với String trong Javascript

1128

Chào các bạn,

String là một trong những kiểu dữ liệu của JavaScript, mặt khác, thao tác xử lý string diễn ra cực kỳ phổ biến trong lập trình nói chung và lập trình JavaScript nói riêng.

Bài viết này mình sẽ gửi tới bạn các thao tác xử lý string phổ biến mà Javascript đã hỗ trợ, mời các bạn cùng theo dõi.

Các phương thức, thuộc tính của String trong JavaScript

Đây là toàn bộ các methods, properties của String trong JavaScript:

charAt()

charAt() trả về ký tự trong string tương ứng với vị trí bạn truyền vào. Vị trí được tính từ 0.

Cú pháp: str.charAt(index). Trong đó index là vị trí của ký tự cần lấy.

var str = "HELLO WORLD";
str.charAt(0); // H
str.charAt(1); // E
str.charAt(2); // L

charCodeAt()

charCodeAt() trả về mã Unicode của ký tự trong string tương ứng với vị trí bạn truyền vào.

Cú pháp str.charCodeAt(index). Trong đó index là vị trí của ký tự cần lấy.

var str = "HELLO WORLD";
str.charCodeAt(0); // 72
str.charCodeAt(1); // 69
str.charCodeAt(2); // 76

concat()

concat() được sử dụng để nối 2 hoặc nhiều string lại với nhau. Phương thức này không làm thay đổi string ban đầu, nhưng sẽ trả về một string mới.

Cú pháp: str.concat(string1, string2,... stringN).

// VD 1
var str1 = "Hello ";
var str2 = "world!";
var res = str1.concat(str2); // Hello world!

// VD 2
var last = "Pham ";
var middle = "Quang ";
var first = "Binh";
var full = last.concat(middle, first); // Pham Quang Binh

endsWith()

endsWith() sẽ kiểm tra string con có nằm trong string mẹ hay không. Nếu tìm thấy sẽ trả về true, ngược lại trả về false.

Cú pháp: str.endsWith(searchString, length). Trong đó:

  • searchString: String con cần tìm kiếm, có phân biệt chữ hoa, chữ thường.
  • length: Không bắt buộc, là giới hạn độ dài của str, nếu không truyền thì mặc định sẽ là độ dài của str.
var str = "Hello world, welcome to the universe.";
var n = str.endsWith("universe."); // true

// String mẹ được tính từ đầu cho tới vị trí thứ 11
var m = str.endsWith("world", 11); // true

fromCharCode()

fromCharCode() được sử dụng để chuyển đối mã Unicode thành ký tự tương ứng. Đây là một phương thức tĩnh, luôn luôn có cú pháp là String.fromCharCode().

Cú pháp: String.fromCharCode(n1, n2, ...nX).

var text = String.fromCharCode(65); // A

// Hoặc có thể truyền nhiều mã Unicode để nối thành string
var text = String.fromCharCode(72, 69, 76); // HEL

includes()

includes() được sử dụng để kiểm tra xem string con có nằm trong string mẹ hay không. Phương thức trả về true nếu tìm thấy, ngược lại trả về false.

Cú pháp: string.includes(searchValue, start). Trong đó:

  • searchValue: String con cần tìm kiếm, phân biệt chữ hoa chữ thường.
  • start: Không bắt buộc, mặc định là 0, là ví trí bắt đầu để tìm kiếm.
var str = "Hello world, welcome to the universe.";
var n = str.includes("world"); // true

// Phạm vi tìm kiếm được bắt đầu từ vị trí thứ 12 trong string ban đầu
var m = str.includes("world", 12); // true

indexOf()

indexOf() được sử dụng khi bạn muốn lấy vị trí xuất hiện đầu tiên của string con trong string mẹ.

Lưu ý: nếu tìm thấy thì vị trí được tính từ 0, nếu không tìm thấy thì trả về -1;

Cú pháp: string.indexOf(searchvalue, start). Trong đó:

  • searchValue: String con cần tìm kiếm, phân biệt chữ hoa chữ thường.
  • start: Không bắt buộc, mặc định là 0, là ví trí bắt đầu để tìm kiếm.
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome"); // 13

// Không tìm thấy string con trong string mẹ
// sẽ trả về -1
var m = str.indexOf("phambinh.net"); // -1

// Phạm vi tìm kiếm được bắt đầu từ trị trí thứ 5 trong string ban đầu
var l = str.indexOf("e", 5); // 14

lastIndexOf()

Tương tự như indexOf(), nhưng trả về vị trí xuất hiện cuối cùng của string con trong string mẹ.

Cú pháp: string.lastIndexOf(searchvalue, length). Trong đó:

  • searchValue: String con cần tìm kiếm, phân biệt chữ hoa chữ thường.
  • length: Không bắt buộc, là giới hạn của string, mặc định sẽ là độ dài của string.
var string = "hello hi hi hello";
var n = string.lastIndexOf("hello"); // 12

// Không tìm thấy string con trong string mẹ
// sẽ trả về -1
var m = string.lastIndexOf("phambinh.net"); // -1

// Phạm vi tìm kiếm được tính từ đầu string cho tới vị trí thứ 5
var l = string.lastIndexOf("he", 5); // 0

length

length được sử dụng khi bạn muốn lấy độ dài của string.

var str = "Hello world";
var length = str.length; // 11

localeCompare()

localeCompare() được sử dụng khi bạn muốn so sánh 2 string theo ngôn ngữ địa phương.

Tùy thuộc vào mỗi vùng (quốc gia) mà kết quả của việc so sánh 2 string sẽ khác nhau. Địa phương sẽ được lấy từ thông tin của trình duyệt.

localeCompare() sẽ trả về:

  • Trả về -1 nếu str1 được sắp xếp trước str2
  • Trả về 0 nếu str1 bằng str2
  • Trả về 1 nếu str1 được sắp xếp sau str2

Cú pháp: string.localeCompare(compareString). Trong đó compareString là string mà bạn muốn so sánh với string hiện tại.

// Giả sử "địa phương" đang là Việt Nam
var str1 = "ab";
var str2 = "cd";
var n = str1.localeCompare(str2); // -1

match()

match() được sử dụng khi bạn muốn trích một string con trong string mẹ bằng “biểu thức chính quy“. Phương thức này sẽ trả về kết quả dưới dạng mảng nếu tìm thấy string con phù hợp với điều kiện của biểu thức chính quy, trả null nếu không tìm thấy.

Cú pháp: string.match(regexp). Trong đó regexp là chuỗi biểu thức chính quy.

var str = "The rain in SPAIN stays mainly in the plain";

// Tìm tất cả các string 'aig' trong string str
var res = str.match(/ain/g); // ["ain", "ain", "ain"]

repeat()

repeat() được sử dụng khi bạn muốn lặp đi lặp lại một string tương ứng với số lần bạn truyền vào.

Cú pháp: string.repeat(count). Trong đó count là số lần mà bạn muốn string được lặp lại.

var str = "Hello world!";
var str2 = str.repeat(2); // Hello world!Hello world!

replace()

replace() được sử dụng khi bạn muốn tìm kiếm và thay thế một string con trong string mẹ. Phương thức này không làm thay đổi string mẹ, mà trả về một string mới.

Lưu ý: Nếu string con không được thể hiện dưới dạng biểu thức chính quy, thì replace() sẽ chỉ thay thế được string con đầu tiên tìm thấy. Nếu bạn muốn tìm và thay thế tất cả, thì có thể sử dụng /string/g (xem ví dụ bên dưới).

Cú pháp: string.replace(searchValue, newValue). Trong đó:

  • searchValue: Là string con cần tìm kiếm, hoặc là chuỗi biểu thức chính quy. Cái mà sẽ được thay thế bằng newValue.
  • newValue: Là giá trị sẽ được thay thế.
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "Phambinh.net"); // Visit Phambinh.net

// Tìm kiếm tất cả 'you' thay thế thành 'Binh'
var str = "I love you, you are my life";
var res = str.replace(/you/g, "Binh"); // I love Binh, Binh are my life

search() được sử dụng khi bạn muốn tìm vị trí một string con trong string mẹ theo biểu thức chính quy. Nếu trong string mẹ xuất hiện nhiều lần string con cần tìm, thì trả về vị trí của string con đầu tiên. Phương thức này gần giống với indexOf(), khác ở chỗ indexOf() chỉ chấp nhận input là string, còn search() chấp nhận cả biểu thức chính quy.

Nếu không tìm thấy string con trong string mẹ, search() sẽ trả về -1.

Cú pháp: string.search(searchValue). Trong đó searchValue là string con cần tìm kiếm, hoặc là chuỗi biểu thức chính quy thể hiện cho string con cần tìm.

var str = "Welcome to Phambinh.net";

// Tìm theo string thông thường.
var n = str.search("Phambinh.net"); // 11

// Tìm theo biểu thức chính quy
var m = str.search(/to/); // 8

slice()

slice() được sử dụng khi bạn muốn trích một string con trong string mẹ từ vị trí n tới vị trí m. Tham số n, m cũng có thể là số âm, nếu là số âm vị trí sẽ được tính từ cuối string.

Cú pháp: string.slice(start, end). Trong đó:

  • start: Là vị trí bắt đầu cắt string con, tương ứng với tham số n.
  • end: Không bắt buộc, là vị trí kết thúc của string con, tương ứng với tham số m. Nếu không truyền, phương thức này sẽ cắt từ vị trí start tới cuối string.
var str = "Hello world!"; 
var res = str.slice(0, 5); // Hello
var res2 = str.slice(6); // world!
var res3 = str.slice(-3); // ld!

split()

split() được sử dụng khi bạn muốn phân tách string mẹ thành một mảng các string con theo một dấu hiệu nhận biết nào đó. Nếu dấu hiệu nhận biết là một string rỗng ”, thì split() sẽ tách các ký tự trong string mẹ thành các phần tử trong mảng kết quả. Phương thức này không làm thay đổi string mẹ.

Cú pháp: string.split(separator, limit). Trong đó:

  • separator: Không bắt buộc, là dấu hiệu nhận biết để phân tách string.
  • limit: Số lượng phần tử tối đa muốn phân tách.
var str = "How are you doing today?";
var res = str.split(" "); // ["How", "are", "you", "doing", "today?"]

var str2 = "Phambinh.net";
var res2 = str2.split(""); // ["P", "h", "a", "m", "b", "i", "n", "h", ".", "n", "e", "t"]

var str3 = "Hello world";
var res3 = str3.split("", 5); // ["H", "e", "l", "l", "o"]

startsWith()

startsWith() được sử dụng khi bạn muốn kiểm tra một string mẹ có được bắt đầu bằng string con bạn truyền vào không. Nếu đúng sẽ trả về true, ngược lại trả về false.

Cú pháp: string.startsWith(searchValue, start). Trong đó:

  • searchValue: Là string con cần tìm kiếm
  • start: Không bắt buộc, mặc định là 0. Là vị trí bắt đầu tìm kiếm
var str = "Hello world, welcome to the universe.";
var n = str.startsWith("Hello"); // true
var m = str.startsWith("Hi"); // false
var l = str.startsWith("world", 6); // true

substr()

substr() được sử dụng khi bạn muốn cắt một string con trong string mẹ từ vị trí n và kéo dài m phần tử.

Lưu ý: substr() khá dễ nhầm lẫn với slice(), chúng khác nhau ở tham số thứ 2:

  • substr(): Tham số mđộ dài của string con tính từ vị trí n.
  • slice(): Tham số m là vị trí kết thúc của string con tính từ vị trí n.

Cú pháp: string.substr(start, length). Trong đó:

  • start: Vị trí bắt đầu cắt, tương ứng với tham số n.
  • length: Không bắt buộc, độ dài của string con muốn cắt, tương ứng với tham số m. Nếu không truyền thì sẽ cắt từ vị trí start cho tới cuối string mẹ.
var str = "Hello world!";
var res = str.substr(1, 4); // ello

substring()

substring() được sử dụng khi bạn muốn trích một string con trong string mẹ từ vị trí n tới vị trí m. Tham số m là tham số không bắt buộc, nếu bạn không truyền, substring() sẽ trích từ vị trí n tới cuối string.

Phương thức này khá giống với slice(), giống nhau cả về ý nghĩa của tham số thứ 2. Tuy nhiên cách thực hiện của chúng có phần khác nhau:

  • substring(): Nếu tham số n > m, thì ý nghĩa của nó sẽ được đổi cho nhau. Tức nó sẽ cắt từ vị trí m tới vị trí n. Hơn nữa nm không nhận giá trị âm, nếu bạn truyền giá trị âm thì string con trả về sẽ giống string mẹ ban đầu.
  • slice(): Nếu tham số n >= m, thì sẽ trả về string rỗng, nm có thể nhận giá trị âm.

Cú pháp: string.substring(start, end). Trong đó:

  • start: Là vị trí bắt đầu cắt string con, tương ứng với tham số n.
  • end: Không bắt buộc, là vị trí kết thúc của string con, tương ứng với tham số m. Nếu không truyền, phương thức này sẽ cắt từ vị trí start tới cuối string.
var str = "Hello world!"; 
var res = str.substring(1, 3); // el

toLowerCase()

toLowerCase() được sử dụng khi bạn muốn chuyển tất cả các ký tự trong string về dạng chữ thường.

Cú pháp: string.toLowerCase(). Phương thức này không có tham số.

var str = "Hello World!";
var res = str.toLowerCase(); // hello world!

toLocaleLowerCase()

toLocaleLowerCase() được sử dụng khi bạn muốn chuyển tất cả các ký tự trong string về dạng chữ thường của địa phương.

Trong hầu hết các trường hợp, thì phương thức này với phương thức toLowerCase() kể trên sẽ trả về cùng một kết quả. Tuy nhiên với một số quốc gia, ví dụ như Thổ Nhĩ Kỳ, thì không tuân theo quy tắc Unicode thông thường, nên kết quả có thể khác nhau.

Cú pháp: string.toLocaleUpperCase(). Phương thức này không có tham số.

var str = "Hello World!";
var res = str.toLowerCase(); // hello world!

toUpperCase()

toUpperCase() được sử dụng khi bạn muốn chuyển toàn bộ ký tự trong string thành dạng CHỮ HOA.

Cú pháp: string.toUpperCase(). Phương thức này không có tham số.

var str = "Hello World!";
var res = str.toUpperCase(); // HELLO WORLD!

toLocaleUpperCase()

toLocaleUpperCase() được sử dụng khi bạn muốn chuyển tất cả các ký tự trong string về dạng CHỮ HOA của địa phương.

Sự khác biệt giữa phương thức này và phương thức toUpperCase() tương tự như phương thức toLowerCase() và phương thức toLocaleLowerCase() kể trên.

Cú pháp: string.toLocaleUpperCase(). Phương thức này không có tham số.

var str = "Hello World!";
var res = str.toUpperCase(); // HELLO WORLD!

trim()

trim() được sử dụng khi bạn muốn xóa khoảng trắng ở hai đầu của string.

Cú pháp: string.trim(). Phương thức này không có tham số.

var str = "       Hello World!        ";
var res = str.trim(); // Hello World!

valueOf()

valueOf() được sử dụng khi bạn muốn trả về giá trị gốc của string. Phương thức này khá ít khi sử dụng, để hiểu được phương thức này bạn hãy xem ví dụ dưới.

Cú pháp: string.valueOf(). Phương thức này không có tham số.

var x = {
    valueOf: function () {
        return "Binh";
    }
}

// Xem kiểu dữ liệu của x
console.log(typeof x) // object

// Nối x với một string xem thế nào
var hello = "Hello " + x; // Hello Binh

// Nhận xét:
// Nếu x là một object và có phương thức valueOf()
// thì khi thực hiện phép toán trên x, giá trị của x sẽ là giá trị của phương thức valueOf()
// Đấy là lý do tại sao "Hello " + x == "Hello Binh"

toString()

toString() được sử dụng khi bạn cố ép một dữ liệu khác về dạng string. Để hiểu được phương thức này mời bạn xem ví dụ bên dưới.

var x = {
    toString: function () {
        return "Binh";
    }
}

// Xem kiểu dữ liệu của x
console.log(typeof x); // object

// Thử sử dụng x trong trường hợp x bị ép thành string
alert(x); // Sẽ alert lên là "Binh"

// Nhận xét
// Nếu một object có phương thức toString()
// thì trong trường hợp x cần ép về dạng string, thì giá trị của x sẽ là giá trị của phương thức toString()
Bộ sưu tập áo thun cho dân IT, đủ các ngôn ngữ lập trình và hệ điều hành.
Click vào ảnh để xem.
QC Được tài trợ

Lời kết

Trong các phương thức kể trên có nhiều phương thức gần giống nhau, các bạn hãy lưu ý để biết cách sử dụng đúng trường hợp như:

  • indexOf() vs search()
  • substr() vs slice() vs substring()

Hay một số phương thức có kết quả phụ thuộc vào “địa phương” của browser như:

  • localeCompare()
  • toLocaleLowerCase()
  • toLocaleUpperCase()

Chúc các bạn học tập hiệu quả.