ECMAScript 6 字符串和数值的拓展

本文详细介绍了ES6中字符串和数值的拓展,包括模板字符串、字符串新增方法(如includes、startsWith、endsWith)以及数组的拓展运算符、Array.from()、Array.of()等方法。同时讲解了对象的简洁表示法、属性名表达式和super关键字等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、模板字符串

在我们的变成过程中,有时候我们需要在字符串中编写大量的HTML结构代码:

const obj = {
   
    img: 'http://www.baidu.com/test.png',
    title: '离思',
    subTitle: '取次花丛懒回顾,半缘修道半缘君。',
    mess: ['唐','元稹']
};

let el = '<div>'+
'<img src="'+ obj.img +'">'+
'<h3>'+ obj.title +'</h3>'+
'<p>'+obj.subTitle+'</p>'+
'<div><span>'+ obj.mess[0] +'</span><span>'+ obj.mess[1] +'</span></div>'+
'</div>';

这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题:

const obj = {
   
    img: 'http://www.baidu.com/test.png',
    title: '离思',
    subTitle: '取次花丛懒回顾,半缘修道半缘君。',
    mess: ['唐','元稹']
};

let el = `
    <div>
        <img src="${
     obj.img}">
        <h3>${
     obj.title}</h3>
        <p>${
     obj.subTitle}</p>
        <div>
            <span>${
     obj.mess[0]}</span>
            <span>${
     obj.mess[1]}</span>
        </div>
    </div>
`;

模板字符串是增强版的字符串,用反引号(``)标识,它可以当做普通字符串,也可以用来定义多行字符串,或者在字符串中嵌入变量。
注:

  • 如果模板字符串中要使用反引号,那么需要使用反斜杠转义。
  • 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出中。
  • 在模板字符串中嵌入变量,需要将变量名写在${}中。
  • ${}的大括号中可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
  • 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
  • 模板字符串甚至还能嵌套。
字符串的新增方法

传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello');
s.endsWith('!');
s.includes('o');

这三个方法都支持第二个参数,表示开始搜索的位置。

let s = 'Hello world!';
s.startsWith('world', 6); 
s.endsWith('Hello', 5);
s.includes('Hello', 6);

拓展: 为String类添加一个loIncludes()函数,实现和includes()一样的效果。

String.prototype.loIncludes = function(str, i) {
   
    const newStr = this.substr(i);
    const currI = newStr.indexOf(str);
    if(currI < 0 || newStr == '') return false;
    return true;
};

let testStr = 'hello world';
const res = testStr.loIncludes('o');
二、字符串的实例方法

1. repeat()返回一个新字符串,表示将原来的字符串重复了若干次。

'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'na'.repeat(2.9); // "nana"
'na'.repeat(Infinity); // RangeError
'na'.repeat(-1); // RangeError

2. 实例方法:trimStart(),trimEnd()。

const s = 
此压缩包包含了本毕业设计项目的完整内容,具体包括源代码、毕业论文以及演示PPT模板。 开发语言:Java 框架:SSM(Spring、Spring MVC、MyBatis) JDK版本:JDK 1.8 或以上 开发工具:Eclipse 或 IntelliJ IDEA Maven版本:Maven 3.3 或以上 数据库:MySQL 5.7 或以上 项目配置完成后即可运行,若需添加额外功能,可根据需求自行扩展。 运行条件 确保已安装 JDK 1.8 或更高版本,并正确配置 Java 环境变量。 使用 Eclipse 或 IntelliJ IDEA 打开项目,导入 Maven 依赖,确保依赖包下载完成。 配置数据库环境,确保 MySQL 服务正常运行,并导入项目中提供的数据库脚本。 在 IDE 中启动项目,确认所有服务正常运行。 主要功能简述: 请假审批流程:系统支持请假申请的逐级审批,包括班主任审批院系领导审批(针对超过三天的请假)。学生可以随时查看请假申请的审批进展情况。 请假记录管理:系统记录学生的所有请假记录,包括请假时间、原因、审批状态及审批意见等,供学生审批人员查询。 学生在线请假:学生可以通过系统在线填写请假申请,包括请假的起止日期请假原因,并提交给班主任审批。超过三天的请假需经班主任审批后,再由院系领导审批。 出勤信息记录:任课老师可以在线记录学生的上课出勤情况,包括迟到、早退、旷课请假等状态。 出勤信息查询:学生、任课老师、班主任、院系领导学校领导均可根据权限查看不同范围的学生上课出勤信息。学生可以查看自己所有学年的出勤信息,任课老师可以查看所教班级的出勤信息,班主任院系领导可以查看本班或本院系的出勤信息,学校领导可以查看全校的出勤信息。 出勤统计与分析:系统提供出勤统计功能,可以按班级、学期等条件统计学生的出勤情况,帮助管理人员了解学生的出勤状况。 用户管理:系统管理员负责管理所有用户信息,包括学生、任课老师、班主任、院系领导学校领导的账号创建、权限分配等。 数据维护:管理员可以动态更新维护系统所需的数据,如学生信息、课程安排、学年安排等,确保系统的正常运行。 系统配置:管理员可以对系统进行配置,如设置数据库连接参数、调整系统参数等,以满足不同的使用需求。 身份验证:系统采用用户名密码进行身份验证,确保只有授权用户才能访问系统。不同用户类型(学生、任课老师、班主任、院系领导、学校领导、系统管理员)具有不同的操作权限。 权限控制:系统根据用户类型分配不同的操作权限,确保用户只能访问操作其权限范围内的功能数据。 数据安全:系统采取多种措施保障数据安全,如数据库加密、访问控制等,防止数据泄露非法访问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锋利的二丫

如果对您有帮助,请博主喝杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值