HTML中的＜!DOCTYPE html＞和JavaScript中的strict mode

学习&实践爱好者

已于 2023-04-17 13:55:49 修改

阅读量843

点赞数

分类专栏： HTML5与CSS3 前端开发 JavaScrip技术文章标签： html 前端

于 2022-09-09 21:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/126758610

版权

JavaScrip技术同时被 3 个专栏收录

107 篇文章 20 订阅

订阅专栏

HTML5与CSS3

76 篇文章 13 订阅

订阅专栏

前端开发

64 篇文章 3 订阅

订阅专栏

HTML中的<!DOCTYPE html>和JavaScript中的strict mode

本文包括：<!DOCTYPE html>的说明、JavaScript严格模式（strict mode）

关于HTML中的<!DOCTYPE html>

<!DOCTYPE html>文档类型声明，确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。https://developer.mozilla.org/zh-CN/docs/Glossary/Doctype

<!DOCTYPE html>是html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。在 HTML5 中，<!DOCTYPE html>声明唯一的作用是启用标准模式。更早期的 HTML 标准中，<!DOCTYPE> 声明会附加其他意义，对于早期的附加的其它意义因过时了就不多说了，有兴趣的读者可见 https://cloud.tencent.com/developer/article/1018828。

注意，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。DOCTYPE是document type(文档类型)的简写。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。<!DOCTYPE html>是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的，不用区分大小写，但一般这样写。

下面给出一个简单而比较完整的网页文件示意：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width" />
<title>页面标题</title>
</head>
<body>
<h1>h1级文本标题</h1>
<p>文本段落</p>
</body>
</html>

关于JavaScript中的strict mode（严格模式）

ECMAScript 5 引入了 strict mode ,现在已经被大多浏览器实现。若浏览器不支持会被忽略。“use strict” 的目的是指定代码在严格条件下执行，如严格模式下你不能使用未声明的变量。严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。

严格模式对正常的 JavaScript 语义做了一些更改。

严格模式通过抛出错误来消除了一些原有静默错误。

严格模式修复了一些导致 JavaScript 引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。

严格模式禁用了在 ECMAScript 的未来版本中可能会定义的一些语法。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

严格模式声明

要启用严格模式，您只需要在JavaScript程序代码的开头添加：

"use strict";

或

'use strict';

指令即可

我们可以在浏览器按下 F12 (或点击"工具>更多工具>开发者工具") 开启调试模式，查看报错信息。

严格模式的限制

☆不允许使用未声明的变量的情况

例1、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用“use strict”情况之一</title>
</head>
<body>
<h3>使用 "use strict":不允许使用未定义的变量。</h3>
<p>浏览器按下 F12 键开启调试模式，可查看到报错信息。</p>
<script>
"use strict";
let x;
x = 10.50;       
y = 20.12// 报错 (y 未定义)
</script>
</body>
</html>

保存文件名：使用use_strict测试1.html

用浏览器打开运行后，再按下F12键可查看到报错信息

未使用 use strict如果一个变量没有声明就赋值，默认是全局变量。使用 use strict则禁止这种用法，变量必须显式声明。再给出一例如下。

例2、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用“use strict”情况之一</title>
</head>
<body>
<h3>使用 "use strict":不允许使用未定义的变量示例2。</h3>
<p>浏览器按下 F12 键开启调试模式，可查看到报错信息。</p>
<script>
"use strict";
for (i = 0; i < 2; i++) {
  // 报错，i未声明
}
</script>
</body>
</html>

保存文件名：使用use_strict测试2.html

用浏览器打开运行后，再按下F12键可查看到报错信息：