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

总结:

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

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

模板字符串可以调用函数

不给变量命名的话会报错



相关文章
|
2月前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
18 6
|
9月前
|
JavaScript
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
ES6对String字符串、Array数组、Number数字、Object对象 类型做了哪些升级优化
|
索引
ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。(含例题)
学习ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。
180 0
|
存储 Web App开发 前端开发
ES6, Angular,React和ABAP中的String Template(字符串模板)
ES6, Angular,React和ABAP中的String Template(字符串模板)
172 0
ES6, Angular,React和ABAP中的String Template(字符串模板)
ES6—38:String的拓展方法
ES6—38:String的拓展方法
90 0
ES6—38:String的拓展方法
|
JavaScript 前端开发
String 的扩展方法
String的扩展方法String.prototype.方法名=function(){...}基础知识字符串操作和正则表达式的应用一、合并多个空白为一个空白String.prototype.
642 0
|
20天前
|
Java API 索引
Java基础—笔记—String篇
本文介绍了Java中的`String`类、包的管理和API文档的使用。包用于分类管理Java程序,同包下类无需导包,不同包需导入。使用API时,可按类名搜索、查看包、介绍、构造器和方法。方法命名能暗示其功能,注意参数和返回值。`String`创建有两种方式:双引号创建(常量池,共享)和构造器`new`(每次新建对象)。此外,列举了`String`的常用方法,如`length()`、`charAt()`、`equals()`、`substring()`等。
15 0