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

总结:

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

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

模板字符串可以调用函数

不给变量命名的话会报错



相关文章
|
7月前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
61 6
|
JavaScript
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
114 0
|
索引
ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。(含例题)
学习ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。
207 0
ES6—38:String的拓展方法
ES6—38:String的拓展方法
112 0
ES6—38:String的拓展方法
|
JavaScript 前端开发
String 的扩展方法
String的扩展方法String.prototype.方法名=function(){...}基础知识字符串操作和正则表达式的应用一、合并多个空白为一个空白String.prototype.
661 0
|
3月前
|
Java 索引
java基础(13)String类
本文介绍了Java中String类的多种操作方法,包括字符串拼接、获取长度、去除空格、替换、截取、分割、比较和查找字符等。
44 0
java基础(13)String类
|
23天前
|
存储 编译器 C语言
【c++丨STL】string类的使用
本文介绍了C++中`string`类的基本概念及其主要接口。`string`类在C++标准库中扮演着重要角色,它提供了比C语言中字符串处理函数更丰富、安全和便捷的功能。文章详细讲解了`string`类的构造函数、赋值运算符、容量管理接口、元素访问及遍历方法、字符串修改操作、字符串运算接口、常量成员和非成员函数等内容。通过实例演示了如何使用这些接口进行字符串的创建、修改、查找和比较等操作,帮助读者更好地理解和掌握`string`类的应用。
36 2
|
2月前
|
Java
【编程基础知识】(讲解+示例实战)方法参数的传递机制(值传递及地址传递)以及String类的对象的不可变性
本文深入探讨了Java中方法参数的传递机制,包括值传递和引用传递的区别,以及String类对象的不可变性。通过详细讲解和示例代码,帮助读者理解参数传递的内部原理,并掌握在实际编程中正确处理参数传递的方法。关键词:Java, 方法参数传递, 值传递, 引用传递, String不可变性。
66 1
【编程基础知识】(讲解+示例实战)方法参数的传递机制(值传递及地址传递)以及String类的对象的不可变性