By GokiSoft.Com| 09:31 20/05/2020|
Tài Liệu Javascript

JavaScript String Methods - Các phương thức của chuỗi trong JavaScript

Các phương thức chuỗi giúp bạn làm việc với các chuỗi


Các phương thức và các thuộc tính của chuỗi(String Methods and Properties)


Các giá trị nguyên thủy, như "John Doe", không thể có các thuộc tính hoặc các phương thức(bởi chúng không phải là các đối tượng).

Nhưng với JavaScript, các phương thức và các thuộc tính cũng có thể có sẵn cho các giá trị nguyên thủy, bởi vì JavaScript coi các giá trị nguyên thủy là các đối tượng khi thực thi các phương thức và thuộc tính.


Độ dài của chuỗi


Thuộc tính length trả về độ dài của chuỗi:

ví dụ

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Properties</h2>

<p>The length property returns the length of a string:</p>

<p id="demo"></p>

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>

</body>
</html>


Phát hiện một chuỗi trong một chuỗi


Phương thức indexOf() trả về chỉ số(vị trí) của sự first(đầu tiên) xuất hiện của một đoạn văn bản cụ thể trong chuỗi:

ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The indexOf() method returns the position of the first occurrence of a specified text:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Tip: JavaScript đếm từ vị trí không.

0 là vị trí đầu tiên trong một chuỗi, 1 là thứ hai, 2 là thứ 3...


Phương thức lastIndexOf() trả về chỉ số của sự xuất hiện cuối cùng của một văn bản xác định trong một chuỗi:

ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The lastIndexOf() method returns the position of the last occurrence of a specified text:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Cả hai  indexOf(), và lastIndexOf() đều trả về -1 nếu không tìm thấy văn bản.

ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("John");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Both indexOf(), and lastIndexOf() return -1 if the text is not found:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("John");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Cả hai phương thức đều chấp nhận một tham số thứ hai như vị trí bắt đầu cho việc tìm kiếm:

Ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate", 15);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Phương thức lastIndexOf() tìm ngược lại(từ cuối lên đầu), nghĩa là: nếu tham số thứ hai là  15, việc tìm kiếm bắt đầu từ vị trí 15, và tìm cho đến chỗ bắt đầu của chuỗi.

ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>
<p>Position 15 is position 15 from the beginning.</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Tìm một chuỗi trong một chuỗi


Phương thức search() tìm kiếm một chuỗi bằng một giá trị xác định và trả về vị trí của nơi phù hợp:

ví dụ

var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The search() method returns the position of the first occurrence of a specified text in a string:</p>

<p id="demo"></p>

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>


Bạn có để ý?


Hai phương thức, indexOf() vàsearch(), là tương đương?

Chung đều chấp nhận cùng các đối số (các tham số), và trả về cùng một giá trị?

Hai phương thức này KHÔNG tương đương. Đây là những khác biệt:

-  Phương thức search() không thể lấy đối số vị trí bắt đầu thứ hai.

-  Phương thức  indexOf() không thể dùng các giá trị tìm kiếm mạnh mẽ(biểu thức chính quy).

Bạn sẽ học nhiều hơn về biểu thức chính quy trong chương sau.


Trích xuất các bộ phận trong chuỗi


Có 3 phương thức cho việc trích xuất một phần của một chuỗi:

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


Phương thức slice()


slice() trích xuất một phần của một chuỗi và trả về phần bị trích xuất trong chuỗi mới.

Phương thức lấy 2 tham số: vị trí bắt đầu, và vị trí kết thúc(không bao gồm vị trí cuối cùng).

Đây là một ví dụ cắt ra một phần của một chuỗi từ vị trí 7 đến vị trí 12 (13 - 1):

ví dụ

var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
document.getElementById("demo").innerHTML = res; 
</script>

</body>
</html>


Kết quả của res sẽ là:

Banana


Hãy nhớ: JavaScript đếm vị trí từ không. Vị trí đầu tiên là 0.

Nếu một tham số là số âm, vị trí được tính từ cuối của chuỗi.

Đây là một ví dụ cắt ra một phần của một chuỗi từ vị trị -12 đến vị trí -6:

vị trí

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12,-6);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>


Kết quả sẽ là:

Banana


Nếu bạn bỏ sót tham số thứ hai, phương thức sẽ cắt hết phần còn lại của chuỗi:

ví dụ:

var res = str.slice(7);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>


Hoặc, đếm từ kết thúc:

ví dụ

var res = str.slice(-12);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12) 
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>


Tip: Vị trí âm không làm việc trong IE 8 và cũ hơn.


Phương thức substring()


substring() giống với slice().

Điều khác biệt là substring() không chấp nhận các chỉ số âm.

ví dụ

var str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>


Kết quả của res sẽ là:

Banana


Nếu bạn bỏ qua tham số thứ hai, substr() sẽ cắt hết toàn bộ phần còn lại của chuỗi.

ví dụ

var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>


Kết quả của res sẽ là:

Banana, Kiwi


Nếu tham số đầu tiên là âm, vị trí đến sẽ bắt đầu từ cuối của chuỗi.

ví dụ

var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>



Kết quả của res sẽ là:

Kiwi


Thay đổi nội dung của chuỗi


Phương thức replace() thay đổi một giá trị cụ thể với một giá trị khác trong một chuỗi.

ví dụ

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","W3Schools");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Tip: Phương thức replace() không thay đổi chuỗi mà nó được gọi trên. Nó trả về một chuỗi mới.

Mặc định,phương thức replace() chỉ thay thế mỗi kết quả đầu tiên:

ví dụ

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","W3Schools");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Mặc định, phương thức replace() là phân biệt hoa thường. Viết  MICROSOFT(với chữ hoa) sẽ không được :

ví dụ

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3Schools");
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("MICROSOFT","W3Schools");
  document.getElementById("demo").innerHTML = txt;
}
</script>

<p><strong>Note:</strong> Nothing will happen. By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case) will not work.</p>

</body>
</html>


Để thay thế phân biệt hoa thường, sử dụng một biểu thức chính quy với dấu  /i(insensitive) (không phân biệt hoa thường):

ví dụ

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/MICROSOFT/i,"W3Schools");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>



Tip: Ghi chú lại biểu thức chính quy được viết không có dấu nháy.

Để thay thế toàn bộ kết quả, dùng biểu thức chính quy với một dấu  /g (kết quả tổng quát).

ví dụ

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/Microsoft/g,"W3Schools");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


Tip: Bạn sẽ học nhiều hơn nữa về biểu thức chính quy trong chương Biểu thức chính quy trong JavaScript(JavaScript Regular Expressions).


Chuyển đổi thành chữ hoa và chữ thường


Một chuỗi có thể được chuyển đổi thành chữ hoa với toUpperCase():

ví dụ

var text1 = "Hello World!";       // String
var text2 = text1.toUpperCase();  // text2 is text1 converted to upper
<!DOCTYPE html>
<html>
<body>

<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>

</body>
</html>


Một chuỗi được chuyển thành chữ thường với toLowerCase():

ví dụ

var text1 = "Hello World!";       // String
var text2 = text1.toLowerCase();  // text2 is text1 converted to lower
<!DOCTYPE html>
<html>
<body>

<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  var text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>

</body>
</html>


Phương thức concat()


concat() nối hai hoặc nhiều hơn các chuỗi:

ví dụ

var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>


Phương thức concat() có thể được dùng để thay thế toán tử cộng. Hai dòng sau đều làm việc giống nhau:

ví dụ

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");


Tip: Toàn bộ các phương thức chuỗi đều trả về một chuỗi mới. Chúng không thay đổi chuỗi gốc.

Nói một cách chính thức: Các chuỗi là bất biến: Các chuỗi không thể bị thay đổi, chỉ có thể thay thế. :D


String.trim()


Phương thức trim() loại bỏ các khoảng trắng ở cả hai bên của một chuỗi:

ví dụ

var str = "       Hello World!        ";
alert(str.trim());
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>Click the button to alert the string with removed whitespace.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The trim() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim());
}
</script>

</body>
</html>


Tip: Phương thức trim() không được hỗ trợ trong IE 8 hoặc thấp hơn :D.

NẾu bạn cần phải hỗ trợ IE8, bạn có thể sử dung replace() với một biểu thức chính quy thay thế: :DDD

ví dụ

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>IE 8 does not support String.trim(). To trim a string you can use a regular expression instead.</p>

<script>
var str = "     Hello World!     ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
</script>

</body>
</html>


Bạn cũng có thể thay thế giải pháp trên để thêm chức năng trim vào trong JavaScript String.prototype:

ví dụ

  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
var str = "       Hello World!        ";
alert(str.trim());
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>IE 8 does not support String.trim(). To trim a string you can use a polyfill.</p>

<script>
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
var str = "     Hello World!    ";
alert(str.trim());
</script>

</body>
</html>


Trích xuất các kí tự trong chuỗi


Có 3 phương thức cho việc trích xuất các kí tự trong chuỗi:

  • charAt(position)
  • charCodeAt(position)
  • Truy cập thuộc tính [ ]


Phương thức charAt()


Phương thức charAt() trả về kí tự ở các chỉ số xác định (vị trí) trong một chuỗi:

ví dụ

var str = "HELLO WORLD";
str.charAt(0);            // returns H
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>

</body>
</html>


Phương thức charCodeAt()


Phương thức charCodeAt() trả về mã unicode của kí tự tại một chỉ số xác định trong chuỗi:
Phương thức trả về một mã UTF-16 (một số nguyên giữa 0 và 65535).

ví dụ

var str = "HELLO WORLD";

str.charCodeAt(0);         // returns 72
<!DOCTYPE html>
<html>
<body>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charCodeAt(0);
</script>

</body>
</html>


Truy cập thuộc tính


ECMAScript 5 (2009) cho phép truy cập thuộc tính [ ] trong các chuỗi:

ví dụ

var str = "HELLO WORLD";
str[0];                   // returns H
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property access on strings:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>


Tip: Truy cập thuộc tính có thể có một chút không thể đoán trước được:

- Nó không làm việc trong IE 7 hoặc sớm hơn(tất nhiên :D )

- Nó làm các chuỗi trong giống như các mảng(nhưng nó không phải)

- Nếu không có kí tự nào tìm thấy,[] trả về undefined, trong khi charAt() trả về một chuỗi rỗng.

- Nếu nó đọc mỗi str[0] = "A" nó không lỗi (nhưng nó k chạy! =)))

ví dụ

var str = "HELLO WORLD";
str[0] = "A";             // Gives no error, but does not work
str[0];                   // returns H
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property acces on strings. but read only:</p>

<p id="demo"></p>

<script>
var str = "HELLO WORLD";
str[0] = "A";  // Does not work
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>



Tip: Nếu bạn muốn làm việc với chuỗi như làm việc với mảng, bạn có thể chuyển nó thành mảng.


Chuyển một chuỗi thành một mảng


Một chuỗi có thể chuyển thành một mảng bằng phương thức split() :

ví dụ

var txt = "a,b,c,d,e";   // String
txt.split(",");          // Split on commas
txt.split(" ");          // Split on spaces
txt.split("|");          // Split on pipe
<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to display the first array element, after a string split.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

</body>
</html>


Nếu dấu phân cách bị bỏ qua, mảng được trả về sẽ chứa toàn bộ chuỗi trong chỉ số [0].

Nếu dấu phân cách là "",mảng được trả về sẽ là một mảng của các kí tự đơn lẻ:

ví dụ

var txt = "Hello";       // String
txt.split("");           // Split in characters
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
  text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>








Tags: