typescript学习笔记（一）--字符串、函数等新特性

小灰灰 2023-07-20 05:56 95阅读 0赞

## 一. 字符串新特性 ##

1.  多行字符串  
    我们在js中要连接多个字符串需要使用+，而在ts中可以直接使用\`\`即可，可自动转换成换行符

//ts
    var username = 'dalei';
    var sex = '女';
    var age = `name
    sex`;
    
    //编译后的js
    "use strict";
    var username = 'dalei';
    var sex = '女';
    var age = "name\nsex";

1.  字符串模板  
    在js中我们如果想拼接html，需要用到各种换行符，反斜杠，ts的\`\`可以自行转换，$\{\}可识别变量

//ts
    var sex = '女';
    var age = 18;
    var getName = function () {
        return  'dalei';
    }
    console.log(`<div>
    <span>${getName}</span>
    <span>${age}</span>
    </div>`)
    
    //编译后的js
    "use strict";
    var sex = '女';
    var age = 18;
    var getName = function () {
        return 'dalei';
    };
    console.log("<div>\n<span>" + getName + "</span>\n<span>" + age + "</span>\n</div>");

1.  自动拆分字符串

控制台输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]

## 二. 函数特性 ##

rest操作符这里我就不说了，这里我就简单说一下generator函数

// *即表示generator函数，它依赖es6的yield新关键字，每次next()则执行至下一个yield
    //eg1：
     function* dosomthing {
    	console.log('第一步');
    	yield;
    	console.log('第二步');
    }
    dosomthing.next();
    //此时控制台输出的是

![在这里插入图片描述][2020051211344018.png]

dosomthing.next();
    //此时控制台输出的是

![在这里插入图片描述][20200512114054988.png]

//eg2：实现当股票价格大于最低价格时，再买入
    function* getStockPrice (stock) {
    	while (true) {
    		yield Math.random()*100;
    	}
    }
    var priceGene = getStockPrice ('hai');
    let price:Number = 100;
    let limitPrice = 20;
    console.log(price)
    while (price > limitPrice ) {
    	price = priceGene.next().value;
    	console.log(price)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]: /images/20230528/f8c55fbfde0b43aca9a1d59bb76c457d.png
[2020051211344018.png]: /images/20230528/e1461e9826b2491a88ab000a24fcc360.png
[20200512114054988.png]: /images/20230528/4a0e9ac5d5e341a39ab78b72315749b6.png