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

語言: CN / TW / HK
時間 2022-11-26 18:15:05

本文分享自華為雲社群《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

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

「」
「」