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

最新推荐文章于 2025-01-15 05:31:13 发布

原创最新推荐文章于 2025-01-15 05:31:13 发布 · 972 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #typescript #es6

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

5 篇文章

订阅专栏

本文是关于TypeScript的学习笔记，主要探讨了字符串的多行表示、模板字符串和自动拆分功能，以及函数中的generator函数。通过示例展示了如何在TypeScript中更方便地处理字符串和创建生成器函数。

一. 字符串新特性

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

//ts
var username = 'dalei';
var sex = '女';
var age = `name
sex`;

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

字符串模板
在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>");

自动拆分字符串

function test(template, name, age){
  console.log(template);
  console.log(name);
  console.log(age);
}
var name = 'forrest';
var getAge = function (){
  return 18;
}
test`hello,my name is ${name},i'm ${getAge()} years old.`

控制台输出
在这里插入图片描述

二. 函数特性

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

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

在这里插入图片描述

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

在这里插入图片描述

//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)
}