TypeScript string type

String declaration

Same as one of the JavaScript TypeScript we can also declare a variable of string type '' or double quotes ""

Example:

let str1:string = 'xkd';
let str2:string = "侠课岛";

console.log(str1);
console.log(str2);

This is actually JavaScript to the string type in TypeScript , 06134e286f0724.

New features of strings

TypeScript in string type and JavaScript strings essentially similar, but compared to JavaScript , TypeScript string types added some new features. There are three new features of strings in TypeScript

• Multi-line string.
• String template.
• Automatically split the string.

Multi-line string

The first is a multi-line string. The traditional JavaScript string wrap needs to + , otherwise an error will be reported.

Example:

Let's take a look at the JavaScript code below:

var str = "aaa" + 
"bbb";

console.log(str);  // aaabbb

Remove the + , the code will report an error:

var str = "aaa
bbb";

console.log(str);  // SyntaxError: Invalid or unexpected token

In TypeScript , there is no need to use + splice. We can use `` double apostrophe (the key in the upper left corner of the keyboard) to wrap the string so that line breaks can be realized directly. Rewrite the above code into TypeScript code:

let str = `aaa
bbb`;
console.log(str);

tsc test.ts command in the terminal to compile the TypeScript JavaScript code, which will automatically generate a newline character \n :

var str = "aaa\nbbb";
console.log(str);

Then execute this code, and the output is as follows:

aaa
bbb

String template

TypeScript can introduce an expression to insert a variable or a method call in a multi-line string.

Example:

Look at the following JavaScript code:

var username = "侠课岛";
var getName = function (){
  return "大侠";
} 

console.log("你好:" + username);
console.log("你好:" + getName());

We can use the string template to rewrite this code into TypeScript code as shown below:

let username:string = "侠课岛";
let getName = function (){
  return "大侠";
} 

console.log(`你好:${username}`);
console.log(`你好:${getName()}`);

Split string automatically

When we use a string template to call a method, the value in the string template expression is automatically assigned to the parameters in the called method.

Example:

Let's look at the following code:

function test(template, name, age) {
    console.log(template);  
    console.log(name);      // name就是${myName}
    console.log(age);       // age就是${getAge()}
  }
  
  var myName = "Iven";
  var getAge = function () {
    return 22;
  }
  
// 通过字符串模板的方式，可以实现字符串的拆分
test`我叫 ${myName},今年 ${getAge()} 岁了`;

Compile the above code into JavaScript code:

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
function test(template, name, age) {
    console.log(template);
    console.log(name); // name就是${myName}
    console.log(age);  // age就是${getAge()}
}
var myName = "Iven";
var getAge = function () {
    return 22;
};
// 通过字符串模板的方式，可以实现字符串的拆分
test(__makeTemplateObject(["\u6211\u53EB ", ",\u4ECA\u5E74 ", " \u5C81\u4E86"], ["\u6211\u53EB ", ",\u4ECA\u5E74 ", " \u5C81\u4E86"]), myName, getAge());

Output:

[ '我叫 ', ',今年 ', ' 岁了' ]
Iven
22