JavaScript

Thuộc tính và phương thức của đối tượng JavaScript String

2018/09/18
5.602 lượt xem
by Minh Hoàng
2 bình luận
13 phút đọc
Thuộc tính và phương thức của đối tượng JavaScript String
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Thuộc tính (Properties) và Phương thức (Methods) của String JavaScript

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

– Các giá trị nguyên thủy (primitive values) như “Hello JavaScript”, không thể có các thuộc tính hoặc phương thức (vì chúng không phải là các đố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, bởi 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à các thuộc tính.

Nội dung chính:

  1. Cách tạo một đối tượng String
  2. Các thuộc tính của String
    • constructor
    • length
    • prototype
  3. Một số phương thức thường dùng
    • indexOf()
    • lastIndexOf()
    • search()
    • slice()
    • substring()
    • substr()
    • charAt()
    • charCodeAt()
    • Truy cập property []
    • split()
    • replace()
    • concat()
    • toUpperCase()
    • toLowerCase()
    • trim()
1. Cách tạo một đối tượng String

1. Cách tạo một đối tượng String

String() → trả về một chuỗi rỗng (empty), giống như là “”.

String(value) → chuyển đổi value thành giá trị nguyên thủy kiểu string, rồi return nó.

new String(value) → giống với String(value), nhưng sẽ return một đối tượng (object) string.

Để tạo ra một đối tượng String bạn có thể sử dụng cú pháp sau:

Syntax:
[code language=”javascript”]var objStr = new String("Hello JavaScript");[/code]

– Tuy nhiên, đừng bao giờ tạo chuỗi (string) làm đối tượng (object). Nó làm chậm tốc độ thực thi và từ khóa new làm phức tạp code.
– Chi tiết xem thêm: Chuỗi string có thể là Object.

2. Các thuộc tính của String

2. Các thuộc tính của String

2.1. Thuộc tính constructor

– Trong JavaScript, thuộc tính constructor trả về hàm khởi tạo cho một đối tượng.

– Giá trị trả về là một tham chiếu đến hàm, không phải là tên của hàm. Cú pháp:

string.constructor

– Đối với các chuỗi JavaScript, thuộc tính constructor trả về: function String() { [native code] }

Ví dụ:
[code language=”javascript”]var str = new String("Minh Hoàng Blog!");
str.constructor[/code] Try it »

2.2. Thuộc tính length

– Thuộc tính length trả về số ký tự của một chuỗi. Cú pháp:

string.length
Ví dụ:
[code language=”javascript”]var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var len = str.length;[/code] Try it »

– Trường hợp gán giá trị cho thuộc tính length của chuỗi, cũng không ảnh hưởng gì đến chuỗi cả.

Ví dụ:
[code language=”javascript”]// Khai báo và khởi tạo chuỗi
var myString = "www.minhhn.com";

// Thay đổi thuộc tính length
myString.length = 4;[/code] Try it »

2.3. Thuộc tính prototype

– Thuộc tính prototype cho phép bạn thêm các thuộc tính và phương thức cho bất kỳ đối tượng nào (Number, Boolean, String và Date,…).

– Prototype là một thuộc tính global có sẵn với hầu như tất cả các đối tượng. Cú pháp:

object.prototype.name = value;
Ví dụ:
[code language=”javascript”]// Khai báo đối tượng và
// khởi tạo giá trị cho thuộc tính có sẵn là "title", "author"
var myBook = new book("Learning JavaScript Design Patterns", "Addy Osmani");

// Thêm thuộc tính mới cho đối tượng bằng thuộc tính "prototype"
book.prototype.price = null;
myBook.price = "$28.89";[/code] Try it »

3. Một số phương thức thường dùng

3. Một số phương thức thường dùng

3.1. Nhóm phương thức tìm kiếm (Find) chuỗi trong một chuỗi
Phương thức Cú pháp
indexOf() string.indexOf( searchValue [, fromIndex] );
lastIndexOf() string.lastIndexOf( searchValue [, fromIndex] );
search() string.search( regexp );
● Phương thức indexOf()

Phương thức indexOf() trả về chỉ mục (vị trí) của chuỗi chỉ định đầu tiên xuất hiện trong chuỗi tìm kiếm.

Ví dụ:
[code language=”javascript”]var str = "welcome to minh hoàng blog! www.minhhn.com";
var pos = str.indexOf("minh");[/code] Try it »

JavaScript đếm vị trí từ số không.
0 là vị trí đầu tiên trong một chuỗi, 1 là thứ hai, 2 là vị trí thứ ba,…

● Phương thức lastIndexOf()

– Phương thức lastIndexOf() trả về chỉ mục (vị trí) của chuỗi chỉ định cuối cùng xuất hiện trong chuỗi tìm kiếm.

Ví dụ:
[code language=”javascript”]var str = "welcome to minh hoàng blog! www.minhhn.com";
var pos = str.lastIndexOf("minh");[/code] Try it »

Cả hai phương thức indexOf() và lastIndexOf() đều trả về -1 nếu không tìm thấy chuỗi chỉ định.

– Cả hai phương thức indexOf() và lastIndexOf() đều có thể có thêm tham số thứ hai là vị trí bắt đầu tìm kiếm chuỗi.

Ví dụ:
[code language=”javascript”]var str = "welcome to minh hoàng blog! www.minhhn.com";
var posFirst = str.indexOf("minh", 12);
var posLast = str.lastIndexOf("minh", 34);[/code] Try it »

● Phương thức search()

Phương thức search() tìm kiếm giá trị đã chỉ định trong chuỗi và trả về vị trí phù hợp.

Ví dụ:
[code language=”javascript”]var str = "welcome to minh hoàng blog! www.minhhn.com";
var pos = str.search("minh");[/code] Try it »

★ Tips:

Hai phương thức indexOf() và search() nhìn có vẻ giống nhau khi truyền vào cùng tham số và nhận lại cùng một kết quả, nhưng chúng là khác nhau:

  • Phương thức search() chỉ có duy nhất một tham số.
  • Phương thức indexOf() không thể lấy các giá trị tìm kiếm mạnh từ regular expressions (biểu thức chính quy).
3.2. Nhóm phương thức trích xuất (Extract) một phần chuỗi từ một chuỗi
Phương thức Cú pháp
slice() string.slice( beginSlice [, endSlice] );

  • beginSlice: index từ 0, vị trí bắt đầu trích xuất chuỗi.
  • endSlice: (optional) index từ 0, vị trí kết thúc trích xuất chuỗi, nếu không có đối số này thì vị trí kết thúc là vị trí cuối cùng của chuỗi.
  • beginSlice, endSlice có thể là số dương hoặc âm.
substring() string.substring( indexA [, indexB] );

  • indexA: index từ 0, vị trí bắt đầu trích xuất chuỗi.
  • indexB: (optional) index từ 0, vị trí kết thúc trích xuất chuỗi, nếu không có đối số này thì vị trí kết thúc là vị trí cuối cùng của chuỗi.
  • indexA, indexB CHỈ được phép là số dương.
substr() string.substr( start [, length] );

  • start: Một số nguyên (integer) nằm trong khoảng từ 0 đến dưới độ dài của chuỗi.
  • length: (optional) Một số nguyên giữa 0 và độ dài của chuỗi, nếu không có đối số này thì sẽ lấy length là độ dài của chuỗi.
● Phương thức slice()

– Trong ví dụ này, chúng ta cắt một phần của chuỗi từ vị trí 7 đến vị trí 13.

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";
var newStr = str.slice(7,13); // Banana[/code] Try it »

– Nếu tham số là số âm, vị trí được trích xuất tính từ cuối chuỗi.

– Trong ví dụ này, chúng ta cắt một phần của chuỗi ký tự từ vị trí -12 sang vị trí -6.

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";
var newStr = str.slice(-12,-6); // Banana[/code] Try it »

– Nếu bạn bỏ qua tham số thứ hai (endSlice), phương thức sẽ cắt đến hết chuỗi.

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";

var str1 = str.slice(7);

var str2 = str.slice(-16);[/code] Try it »

Vị trí là số âm sẽ không hoạt động với Internet Explorer 8 và phiên bản cũ hơn.

● Phương thức substring()

– substring() thì tương tự như slice().

– Sự khác biệt là substring() không chấp nhận các chỉ số âm (negative indexes).

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";
var newStr = str.substring(7,13); // Banana[/code] Try it »

– Nếu bạn bỏ qua tham số thứ hai, phương thức sẽ cắt đến hết chuỗi.

● Phương thức substr()

– substr() thì tương tự như slice().

– Sự khác biệt là tham số thứ hai chỉ định chiều dài của phần được trích xuất.

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";
var newStr = str.substr(7,10); // Banana, Ki[/code] Try it »

– Nếu bạn bỏ qua tham số thứ hai, phương thức sẽ cắt đến hết chuỗi.

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

Ví dụ:
[code language=”javascript”]var str = "Apple, Banana, Kiwi";
var newStr = str.substr(-10); // nana, Kiwi[/code] Try it »

3.3. Nhóm phương thức trích xuất (Extract) ký tự từ một chuỗi
Phương thức Cú pháp
charAt() string.charAt( position );
charCodeAt() string.charCodeAt( position );
Property access [ ] string[ index ];
● Phương thức charAt()

Phương thức charAt() trả về ký tự tại chỉ mục/index (vị trí/position) được chỉ định trong chuỗi.

Ví dụ:
[code language=”javascript”]var str = "MINH HOÀNG";

str.charAt(5); // return H[/code] Try it »

● Phương thức charCodeAt()

– Phương thức charCodeAt() trả về unicode của ký tự tại chỉ mục/index được chỉ định trong chuỗi.

– Phương thức này trả về một số nguyên UTF-16 từ 0 đến 65535.

Ví dụ:
[code language=”javascript”]var str = "MINH HOÀNG";

str.charCodeAt(5); // return 72[/code] Try it »

● Property access [ ]

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

Ví dụ:
[code language=”javascript”]var str = "MINH HOÀNG";

str[5]; // return H[/code] Try it »

Quyền truy cập thuộc tính có thể hơi khó lường:

  • Nó sẽ không hoạt động với Internet Explorer 7 và phiên bản cũ hơn.
  • Nó làm cho chuỗi trông giống như một mảng (nhưng không phải vậy)
  • Nếu không tìm thấy ký tự nào, [] trả về “undefined”, trong khi charAt() trả về một chuỗi rỗng.
  • Nó chỉ đọc (read only). Khi gán str[0] = “A” không có lỗi (nhưng không hoạt động!)

Ví dụ:
[code language=”javascript”]var str = "MINH HOÀNG";
str[5] = "A"; // Không có lỗi, nhưng không có tác dụng
str[5]; // Ký tự tại index = 5 vẫn là H[/code] Try it »

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

3.4. Chuyển đổi một chuỗi (String) thành một mảng (Array)

– Một chuỗi có thể được chuyển đổi thành một mảng với phương thức split():

Ví dụ:
[code language=”javascript”]var str = "a,b,c,d,e"; // String
str.split(","); // Split on commas
str.split(" "); // Split on spaces
str.split("|"); // Split on pipe[/code] Try it »

– Nếu dấu tách được bỏ qua, mảng được trả về sẽ chứa toàn bộ chuỗi trong chỉ mục [0] (index [0]).

– Nếu dấu phân cách là “”, mảng được trả về sẽ là một mảng các ký tự đơn:

Ví dụ:
[code language=”javascript”]var str = "Hello"; // String
str.split(""); // Split thành một mảng chứa từng ký tự[/code] Try it »

3.5. Phương thức thay thế (Replace) nội dung của chuỗi

– 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.

– Phương thức replace() không thay đổi chuỗi được gọi (chuỗi gốc) mà sẽ trả về một chuỗi mới.

Ví dụ:
[code language=”javascript”]var str = "Welcome to Google!";
var strNew = str.replace("Google", "Minh Hoàng Blog");[/code] Try it »

– Theo mặc định, hàm replace() chỉ thay thế kết quả khớp đầu tiên:

Ví dụ:
[code language=”javascript”]var str = "Welcome to Google and visit Google!";
var strNew = str.replace("Google","Minh Hoàng Blog");[/code] Try it »

– Để thay thế tất cả các kết quả phù hợp (matches), bạn hãy sử dụng regular expression (biểu thức chính quy) với flag /g (global match):

Ví dụ:
[code language=”javascript”]var str = "Welcome to Google and visit Google!";
var strNew = str.replace(/Google/g,"Minh Hoàng Blog");[/code] Try it »

Các biểu thức chính quy (Regular expressions) được viết mà không có dấu trích dẫn (quotes).

– Theo mặc định, hàm replace() phân biệt chữ hoa chữ thường. Do đó nếu viết GOOGLE thì sẽ không replace được:

Ví dụ:
[code language=”javascript”]var str = "Welcome to Google!";
var strNew = str.replace("GOOGLE", "Minh Hoàng Blog");[/code]

– Để thay thế mà không phân biệt chữ hoa chữ thường, bạn hãy sử dụng regular expression (biểu thức chính quy) với flag /i (insensitive):

Ví dụ:
[code language=”javascript”]var str = "Welcome to Google!";
var strNew = str.replace(/GOOGLE/i, "Minh Hoàng Blog");[/code] Try it »

3.6. Phương thức nối chuỗi concat()

– Phương thức concat() dùng để nối hai hoặc nhiều chuỗi:

Ví dụ:
[code language=”javascript”]var str1 = "Hello";
var str2 = "World";
var str3 = str1.concat(" ", str2); // Hello World![/code]

– Phương thức concat() có thể được sử dụng thay cho toán tử cộng. Hai dòng này tương đương nhau:

Ví dụ:
[code language=”javascript”]var str1 = "Hello" + " " + "World!";
var str2 = "Hello".concat(" ", "World!");[/code]

Tất cả các phương thức chuỗi trả về một chuỗi mới. Chuỗi gốc không bị thay đổi.

3.7. Chuyển đổi chuỗi thành chữ HOA, chữ thường

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

Ví dụ:
[code language=”javascript”]var str = "Hello World!";
var strUpper = str.toUpperCase(); // HELLO WORLD!
var strLower = str.toLowerCase(); // hello world![/code] Try it »

3.8. Phương thức xóa khoảng trắng trong chuỗi trim()

– String.trim() loại bỏ khoảng trắng từ cả hai bên của một chuỗi.

Ví dụ:
[code language=”javascript”]var str = " Hello World! ";
alert(str.trim()); // "Hello World!"[/code]

String.trim() không hoạt động với Internet Explorer 8 và phiên bản cũ hơn.

– Nếu bạn cần hỗ trợ IE 8, bạn có thể sử dụng String.replace với biểu thức chính quy như sau:

Ví dụ:
[code language=”javascript”]var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ”));[/code]

– Bạn cũng có thể thêm một hàm “trim” vào JavaScript String.prototype bằng cách sử dụng giải pháp thay thế ở trên:

Ví dụ:
[code language=”javascript”]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());[/code] Try it »
Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Bài viết nổi bật cùng chuyên mục

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Xem tất cả bài viết
Translate »