es6 基础学习之字符串和函数的扩展

ES6 中的字符串扩展

ES6 提供了多种新的字符串操作方法和特性。

1. 模板字符串(Template Strings)

使用反引号(`````)而非单引号或双引号来创建字符串,并允许插入变量:

javascript 复制代码
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, John!"

2. 新增的字符串方法

  • startsWith: 判断字符串是否以给定字符串开头
  • endsWith: 判断字符串是否以给定字符串结尾
  • includes: 判断字符串是否包含给定字符串
  • repeat: 重复字符串指定次数
javascript 复制代码
const str = 'hello';

console.log(str.startsWith('he'));  // true
console.log(str.endsWith('lo'));    // true
console.log(str.includes('ell'));   // true
console.log(str.repeat(2));         // 'hellohello'

ES6 中的函数扩展

1. 默认参数

在 ES6 中,函数参数可以有默认值。

javascript 复制代码
function greet(name = 'John', age = 30) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet();                // 输出 "Hello John, you are 30 years old."
greet('Jane', 25);      // 输出 "Hello Jane, you are 25 years old."

2. Rest 参数

使用 ... 操作符接收多余的参数,这些参数被存储在一个数组中。

javascript 复制代码
function sum(...numbers) {
  return numbers.reduce((prev, curr) => prev + curr, 0);
}

console.log(sum(1, 2, 3, 4));  // 输出 10

3. 箭头函数(Arrow Functions)

箭头函数提供了一种更简洁的方式来写函数。

javascript 复制代码
const square = x => x * x;

console.log(square(5));  // 输出 25

注意:箭头函数不绑定自己的 thisargumentssupernew.target。这些函数表达式更适用于那些不需要自己的 this 值的函数。

4. 函数名属性

函数名属性 name 可以返回函数名。

javascript 复制代码
function foo() {}
const bar = function() {};

console.log(foo.name);  // 输出 "foo"
console.log(bar.name);  // 输出 "bar" 在 ES6 中,匿名函数也能有 name 属性

以上只是 ES6 在字符串和函数方面的一些基础扩展。这些新特性使得 JavaScript 编程更加灵活和强大。希望这能帮助你更好地理解和使用 ES6。

相关推荐
一大树19 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx25 分钟前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder1 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者1 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder1 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui1 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
洛小豆2 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator2 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js