ES6 入门到精通（一）let 与 const 命令、模板字符串

已于 2022-07-17 13:52:59 修改
阅读量152 收藏
点赞数
分类专栏： ES6 文章标签： es6 前端 javascript
于 2022-06-24 09:37:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjl_and_djj/article/details/125439399
版权

ES6 入门到精通（一）let 与 const 命令、模板字符串

文章目录

1 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

2.1 var和let的区别

  • var有变量提升，let无变量提升

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let与const</title>
</head>
<body>
</body>
<script>
    
    // var 会变量提升，最后提示undifine，控制台不会报错
    // var varNum; 变量自动提升后效果
    console.log(varNum);
    var varNum = 15;

    // let 无变量提升，会在控制台报错
    console.log(letNum);
    letNum = 20;

</script>
</html>

在这里插入图片描述

  • var非块级，let块级作用域

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let与const</title>
</head>
<body>
</body>
<script>
    
    // 控制台显示undifne不会报错，var作用域非块级，可以在块外部识别
    console.log(varNum);
    if(true){
        var varNum = 10;
        console.log(varNum);
    }
    // 控制台会报错，let作用域块级，无法在块外部识别
    console.log(letNum);
    if(true){
        let letNum = 10;
        console.log(letNum);
    }
    
</script>
</html>

在这里插入图片描述

  • var可以重复声明，let不允许重复声明

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let与const</title>
</head>
<body>

</body>
<script>
    
    // var可以重复声明，并且最后一次声明赋值会覆盖初始值。
    var varNum = 10;
    var varNum = 5;
    // let不允许重复声明，控制台会报错，有些编译器也会直接提示报错。
    let letNum = 30;
    let letNum = 15;

</script>
</html>

在这里插入图片描述

2.2 const 声明变量

在前端项目中最常用的就是const变量，很多第三方框架都会大量使用const保证框架源码不受污染，如Vue等。

  • const 声明的变量无变量提升、不允许重复声明、块级作用域，参考let

  • const 声明的变量不允许被修改

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let与const</title>
</head>
<body>

</body>
<script>
    
    // const声明的变量不允许修改，控制台会直接报错
    const constNum = 10;
    constNum = 5;

</script>
</html>

在这里插入图片描述

  • const 声明的对象里的key value 可以被修改，对象不可修改

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let与const</title>
</head>
<body>

</body>
<script>
    
    // const声明的对象里的key value可以被改变，对象本身不能改变
    const constObject = {name:"张三"};
    console.log("初始值:"+constObject.name);
    constObject.name = "李四"
    console.log("重新赋值:"+constObject.name);
    // 无法重新声明对象
    constObject = {newName:"王五"}

</script>
</html>

在这里插入图片描述

2.3 let 与const 命令总结

let：在使用for循环时，全部使用let替换掉var，因为let为块级作用域，不会因为变量提升等问题，造成循环出错问题。

使用let定义的变量，不会污染全局变量，造成变量值错乱。

const：框架使用最多的变量，拥有let的特性（修改除外），不允许修改变量，允许修改对象里的keyvalue值，保证框架定义源码不受污染。

3.1 模板字符串

  • 原字符串拼接代码可阅读性差
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>
<body>
    <div class ="page">
        <!-- 需要实现效果 
            <h1> 原字符串拼接 与 模板字符串比较 </h1>
            <p>
                <span>哈利</span>
                <span>age</span>
            </p>
        -->
    </div>
</body>
<script>
    // 字符串拼接,代码可阅读性差
    var page = document.querySelector('.page');
    var title = '原字符串拼接'
    var name = '哈利';
    var age = 3;
    page.innerHTML = "<h1>"+title+"</h1>"+"<p> <span> 姓名："+name+"</span> <span> 年龄："+age+"</span> </p>"
    
</script>
</html>

浏览器打开查看效果
在这里插入图片描述

  • 使用 ES6 模板字符串代码可阅读性强
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字符串</title>
</head>
<body>
    <div class ="page">
        <!-- 需要实现效果 
            <h1> 原字符串拼接 与 模板字符串比较 </h1>
            <p>
                <span>哈利</span>
                <span>age</span>
            </p>
        -->
    </div>
</body>
<script>
    // ES6 模板字符串，代码可阅读性强，强烈推荐
    const page = document.querySelector('.page');
    let title = '模板字符串'
    let name = '大将军';
    let age = 28;

    // 英文输入法下使用键盘 Tab键上的 ` 键
    // 变量使用 ${} 包裹
    page.innerHTML = `
            <h1>${title}</h1>
            <p>
                <span>姓名：${name}</span>
                <span>年龄：${age}</span>
            </p>
    `
</script>
</html>

浏览器打开查看效果
在这里插入图片描述

3.2 模板字符串总结

总结：从上述两个例子对比来看，建议以后在实际开发项目中，使用ES6的模板字符串语法，替换掉原来老式的字符串拼接，可以极大的提升代码的可读性

漫天转悠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ES6 从入门到精通 第二部分
08-22
模板字符串使用反引号(`)包裹，支持字符串插值，可以方便地拼接字符串。例如： ```javascript let name = 'Alice'; console.log(`Hello, ${name}!`); ``` ### 9. Set 和 Map Set是不包含重复元素的集合，Map是...
ES6 从入门到精通
08-22
本教程旨在帮助初学者全面掌握ES6的核心概念，逐步从入门到精通。** ### 一、变量声明与解构赋值 在ES6之前，我们主要使用`var`来声明变量，但ES6引入了`let`和`const`。`let`允许我们在同一作用域内多次声明变量，...
ES6（一）：let和const、模板字符串、函数默认值、剩余参数、扩展运算符、箭头函数
m0_73560798的博客
12-04 73
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。
ES6从入门到精通——解构赋值和字符串
悦.L的博客
12-05 140
解构赋值 解构赋值是对赋值运算符的扩展，主要针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分；解构的目标，解构赋值表达式的左边部分 1.数组的解构赋值 在解构的时候存在多种解构方法，如基本解构、嵌套解构、可忽略解构、不完全解构、剩余运算符解构、字符串结构、解构默认值等 let [a, b, c] = [1, 2, 3]; // a = 1 b = 2 c = 3 let [foo, [[bar], baz]] = [1, [[2]
es6 基础知识详解 变量 字符串 解构赋值 函数 对象 从入门到精通
qq_42389674的博客
08-05 134
es6 基础知识总结
ES6从入门到精通
weixin_46519285的博客
04-13 142
ES6从入门到精通 1.let和const 建议：在默认情况下用const,而只有在你知道变量值需要被修改的情况使用let <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ
es6从入门到精通 ES6新特性 es6精讲 必须掌握的es6实用特性
Taurus_666
07-25 596
ES6最新语法let const 命令，跟var的区别变量解构赋值新增字符串方法模板字符串symbol类型proxy代理set方法 let const 命令，跟var的区别 1、var 的作用域是分全局和函数作用域两种，也叫全局变量和局部变量； 2、let 和const作用域都是块级作用域，简单说就是仅在大括号内有效； 3、const 就是constant 的缩写，代表恒定的值，指常量，一般不...
《无所不能的JavaScript：ES6入门》
最新发布
山人行
06-29 860
前文《前端攻城狮 · 从 Nuxt 前端框架开篇》提到，前端技术栈正在发生翻天覆地的变化，各类新技术层出不穷，但回归基础依然是，其中负责逻辑交互的JavaScript，我原称之为前端技术的灵魂。后端程序猿如果想往全栈工程狮发展，那JavaScript必须和Java玩得一样明白，接下来系列文章，带你一起探索，无所不能的JavaScript。本系列第一回，就先从ES6开始说起。旁白：JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。但这是完全错误的理解。
ES6从入门到精通系列，最基础开发必备
只想AC的博客
06-06 152
目前ES6、7、8、9、10、11、12的诞生使得JavaScript脚本语言可以用来必须捏大型应用程序，它已成为企业级开发语言。还不会的同学速来学习，会了的同学，再看一遍内部的原理
【前端】ECMAScript6从入门到进阶
互联网小阿祥
09-29 1189
ECMAScript6入门到进阶
Html+Css+Javascript从入门到精通
08-31
同时，学习ES6（ECMAScript 2015）的新特性，如箭头函数、模板字符串、let和const等，可以使代码更简洁、易读。 本教程“Html+Css+Javascript从入门到精通”涵盖了这些关键概念，并可能包含实战项目，让你在实践中...
[JavaScript与JScript从入门到精通]
05-04
ES6（ECMAScript 2015）引入了许多新特性，如let和const声明、解构赋值、箭头函数、模板字符串、类和模块等，这些特性大大增强了JavaScript的表达能力和可维护性。后续的版本如ES7、ES8等继续引入了更多的功能，如...
JavaScript从入门到精通(实例源程序)
01-05
10. **ES6及新特性**：ECMAScript 6（ES6）引入了许多新特性，如let和const、模板字符串、解构赋值、类和模块。这些新特性让JavaScript更加强大且易于编写。 通过这个“JavaScript从入门到精通（实例源程序）”的...
JavaScript从入门到精通（第2版）PPT.7z
07-14
- **模板字符串**：使用反引号(``)创建字符串，支持插值表达式。 - **解构赋值**：可以从数组或对象中方便地提取值。 - **箭头函数**：简洁的函数定义方式，其`this`指向遵循词法作用域。 - **模块系统**：通过`...
JavaScript与JScript从入门到精通
12-03
最后，了解ES6（ECMAScript 2015）及其后续版本的新特性，如箭头函数、模板字符串、解构赋值、类和模块系统，这些都是现代JavaScript开发的基础。 总的来说，"JavaScript与JScript从入门到精通"涵盖了从基础语法到...
javascript从入门到精通.rar
03-23
最后，现代JavaScript（ES6+）引入了许多新特性，如箭头函数、解构赋值、模板字符串、类等，这些都会让你的代码更简洁、更易读。 此外，“中国IT认证实验室学习下载频道.txt”可能包含了一些学习资源的链接或指南，...
javascript从入门到精通.pdf.rar
03-17
随着Web技术的发展，ES6（ECMAScript 2015）及后续版本引入了许多新特性，如let和const声明变量、解构赋值、模板字符串、箭头函数、Promise处理异步、模块系统等，使得JavaScript语法更加现代化和强大。 最后，性能...
ES6新特性，看这就够了.pdf
09-15
这个文档主要介绍了ES6中的两个重要特性：`let`和`const`以及字符串的扩展。`let`和`const`是ES6中引入的新的变量声明方式，它们提供了块级作用域，解决了`var`存在的变量提升问题。`let`允许重新赋值，但不能在同...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值