ES6——String 的扩展方法

简介: String 的扩展方法

模板字符串

es6新增的一种创建字符串的方式使用反引号(``)定义

之前JavaScript创建变量的写法:

let name = 'Nanchen';
console.log(name);    //Nanchen

输出如下:  

20210929200933186.png

使用反引号定义的写法

let name = `Nanchen`;
console.log(name);    //Nanchen

效果如下图:

20210929201019749.png

模板字符串中可以解析变量

传统的做法需要用大量的""(引号)和 + 来拼接字符串才能得到想要的模板

let name = 'Nanchen'
let sayHello = "my name is " + name
console.log(sayHello);        //my name is Nanchen

使用反引号定义的写法:

let name = `Nanchen`;
let sayHello = `my name is ${name}`
console.log(sayHello);        //my name is Nanchen

模板字符串中可以换行

模板字符串:用反引号(``)标识,把变量用${}将括起来

let result = {
  name: 'Nanchen',
  age: 8,
  sex: '男'
}
  console.log(result);    //{name: "Nanchen", age: 8, sex: "男"}
let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;
document.write(html)

效果如下:

20210929202000690.png

模板中也可以调用函数:

const sayHello = function () {
    return 'web学习';
  };
  let greet = `${sayHello()} 需要努力`;
  console.log(greet);

效果如下:

20210929202955334.png

表示多行字符串,所有的空格和缩进都会被输出!!

接上个例子:

const sayHello = function () {
    return 'web学习';
  };
  let greet = `${sayHello()}            需要努力
        换行`;
  console.log(greet);

20210929203248537.png

在${}中如果没有给变量命名的话,就会获取不到,然后报错

console.log(`你好${name}`);//Uncaught ReferenceError: string is not defined

20210929204120443.png

总结:

.模板字符串可以当连接符使用 也可以当普通引号使用

模板字符串中可以进行空格缩进以及换行

模板字符串可以调用函数

不给变量命名的话会报错



相关文章
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
192 6
|
JavaScript
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
198 0
|
索引
ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。(含例题)
学习ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。
259 0
ES6—38:String的拓展方法
ES6—38:String的拓展方法
170 0
ES6—38:String的拓展方法
|
JavaScript 前端开发
String 的扩展方法
String的扩展方法String.prototype.方法名=function(){...}基础知识字符串操作和正则表达式的应用一、合并多个空白为一个空白String.prototype.
707 0
|
1月前
|
编解码 Java 开发者
Java String类的关键方法总结
以上总结了Java `String` 类最常见和重要功能性方法。每种操作都对应着日常编程任务,并且理解每种操作如何影响及处理 `Strings` 对于任何使用 Java 的开发者来说都至关重要。
269 5
|
5月前
|
存储 编译器 C语言
关于string的‘\0‘与string,vector构造特点,反迭代器与迭代器类等的讨论
你真的了解string的'\0'么?你知道创建一个string a("abcddddddddddddddddddddddddd", 16);这样的string对象要创建多少个对象么?你知道string与vector进行扩容时进行了怎么的操作么?你知道怎么求Vector 最大 最小值 索引 位置么?
147 0
|
8月前
|
缓存 安全 Java
《从头开始学java,一天一个知识点》之:字符串处理:String类的核心API
🌱 **《字符串处理:String类的核心API》一分钟速通!** 本文快速介绍Java中String类的3个高频API:`substring`、`indexOf`和`split`,并通过代码示例展示其用法。重点提示:`substring`的结束索引不包含该位置,`split`支持正则表达式。进一步探讨了String不可变性的高效设计原理及企业级编码规范,如避免使用`new String()`、拼接时使用`StringBuilder`等。最后通过互动解密游戏帮助读者巩固知识。 (上一篇:《多维数组与常见操作》 | 下一篇预告:《输入与输出:Scanner与System类》)
238 11