TypeScript裡string和String,真不是僅僅是大小寫的區別

語言: CN / TW / HK

本文分享自華為雲社群《TypeScript裡string和String的區別》,作者:gentle_zhou。

背景

與JavaScript語言不同的是,TypeScript使用的是靜態型別,比如說它指定了變數可以儲存的資料型別。如下圖所示,如果在JS中,指定變數可以儲存的資料型別,會報錯:“型別註釋只可以在TS檔案中被使用”:

image.png

TypeScript是JavaScript的超集(superset),TypeScript需要編譯(語法轉換)生成JavaScript才能被瀏覽器執行,它也區分了string和String這兩個資料型別。通常來說,string表示原生型別,而String表示物件。

原生string

JavaScript在ES6標準裡支援6種原生型別(number),string是其中之一。

image.png

原生的string是不包含屬性的值(即沒有properties),包括字面上沒有定義型別、字面上定義了string、字面上定義了String和一些從string函式呼叫返回的strings也都可以被歸為原生型別:

image.png

以上三個變數的型別(typeof())是string。

物件String

物件是不同屬性的累積,一個物件可以呼叫許多相應的方法。 let msg3: String = new String('Hello world!');

這個變數msg3的型別就是object: console.log(typeof(msg3)); // object

String物件支援的方法:

image.png image.png image.png

程式碼對比

我們對下面4個變數進行型別的探索與比較:

``` let msg: string = 'Hello world!'; let msg2: String = 'Hello world!'; let msg22 = 'Hello world!'; //字面上沒有定義型別 let msg3: String = new String('Hello world!');

console.log(typeof(msg)); //string console.log(typeof(msg2)); //string console.log(typeof(msg22)); //string console.log(typeof(msg3)); //object console.log(msg === msg2); //true console.log(msg === msg3); //false console.log(msg2 === msg3); //false ```

為什麼需要String物件

首先,當我們使用關鍵字new新建一個String物件的時候,TS會建立一個新的物件;即我們用new新建了兩個String物件,即使內容相同,它們也是指向不同的記憶體。

舉下面兩個栗子:

1、當用a1,b1代表相同值的兩個變數的時候,它們是相同的;而當用new新建兩個物件的時候,即使值相同,它們也是不同的(下圖會輸出false, true):

image.png

2、eval()函式的作用:用來計算表示式的值。如果我們把eval()直接賦給string,而string裡面是計算式的字串,那麼它會返回計算後的值;而如果我們把eval()賦給String,因為它不是原生型別,它只會返回String這個物件(下圖會輸出27, :"8 + 20", 28):

image.png

其次,因為String物件可以有屬性。我們可以用String物件在屬性裡保留一個額外的值。即使這個用法並不常見,但是仍然是TS的一個特性:

``` var prim = 'hello HW'; var obj = new String('hello HW Cloud');

prim.property = 'PaaS'; // Invalid obj.property = 'PaaS'; // Valid console.log(obj.property); //輸出為PaaS ```

兩者區別總結

| string原生型別 | String物件 | | -------------------------------------------- | ------------------------------------ | | 廣泛被使用 | 幾乎很少被使用 | | 只會保留值 | 有能力除了值之外,還可以保留屬性 | | 值是不可變的,因此執行緒安全 | String物件是可變的 | | 沒有任何方法 | String物件有各種方法 | | 不能建立兩個獨立的字面上值相同的string | 可以用new建立兩個物件 | | 是原生的資料型別 | 包裝原生資料型別來建立一個物件 | | 傳遞的值是原生資料本身的拷貝 | 傳遞的值是實際資料的引用 | | 當使用eval()函式時,將直接作為原始碼進行處理 | 當使用eval()函式時,將被轉換為字串 |

參考連結

  1. https://www.geeksforgeeks.org/what-is-the-difference-between-string-and-string-in-typescript/?ref=lbp
  2. https://www.geeksforgeeks.org/variables-datatypes-javascript/
  3. https://www.tutorialspoint.com/typescript/typescript_strings.htm

點選關注,第一時間瞭解華為雲新鮮技術~