String and String in TypeScript are really not just the difference in case

This article is shared from HUAWEI CLOUD Community " The Difference Between String and String in TypeScript ", author: gentle_zhou.

background

Unlike the JavaScript language, TypeScript uses static typing, i.e. it specifies the type of data a variable can hold. As shown in the figure below, if you specify the data type that the variable can save in JS, an error will be reported: "Type annotations can only be used in TS files":

image.png

TypeScript is a superset of JavaScript. TypeScript needs to be compiled (syntax conversion) to generate JavaScript before it can be executed by the browser. It also distinguishes between the two data types of string and String. In general, strings represent primitive types, while String represents objects.

Primitive string

JavaScript supports 6 primitive types (number) in the ES6 standard, and string is one of them.

image.png

A native string is a value that does not contain properties (that is, no properties), including literally no type defined, literal defined string, literal defined String, and some strings returned from string function calls can also be classified as primitive types :

image.png

The type ( ) of the above three variables typeof()is string.

object String

Objects are the accumulation of different properties, and one object can call many corresponding methods.let msg3: String = new String('Hello world!');

The type of this variable msg3 is object:console.log(typeof(msg3)); // object

Methods supported by String objects:

image.png image.png image.png

code comparison

We conduct type exploration and comparison of the following 4 variables:

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
复制代码

Why do you need String objects

First of all, when we use the keyword new to create a new String object, TS will create a new object; that is, we use new to create two new String objects, even if the content is the same, they point to different memory.

Take the following two chestnuts:

1. When a1 and b1 are used to represent two variables with the same value, they are the same; and when new two objects are created with new, even if the values ​​are the same, they are different (the following figure will output false, true):

image.png

2. The role of the eval() function: used to calculate the value of an expression. If we assign eval() directly to string, and the string is a calculated string, it will return the calculated value; and if we assign eval() to String, because it is not a primitive type, it will only Return the String object (the following figure will output 27, :"8 + 20", 28):

image.png

Second, because String objects can have properties. We can use a String object to hold an extra value in a property. Even though this usage is not common, it is still a feature of 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
复制代码

Summary of the difference between the two

string primitive type String object
widely used rarely used
just keep the value Ability to hold properties in addition to values
Values ​​are immutable and therefore thread-safe String objects are mutable
there is no way String objects have various methods
cannot create two separate strings with the same literal value newTwo objects can be created with
is a native data type Wrap a primitive data type to create an object
The value passed is a copy of the native data itself The value passed is a reference to the actual data
When using the eval() function, it will be processed directly as source code When using the eval() function, it will be converted to a string

Reference link

  1. www.geeksforgeeks.org/what-is-the…
  2. www.geeksforgeeks.org/variables-d…
  3. www.tutorialspoint.com/typescript/…

Click Follow to learn about HUAWEI CLOUD's new technologies for the first time~

Guess you like

Origin juejin.im/post/7078485459944357925