加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript ES5

JavaScript基础 2022-04-25 01:44:05小码哥的IT人生shichen

JavaScript ES5

ECMAScript 5 是什么？

ECMAScript 5 也称为 ES5 和 ECMAScript 2009。

本章介绍 ES5 的一些最重要的特性。

ECMAScript 5 特性

这些是 2009 年发布的新特性：

  1. "use strict" 指令
  2. String.trim()
  3. Array.isArray()
  4. Array.forEach()
  5. Array.map()
  6. Array.filter()
  7. Array.reduce()
  8. Array.reduceRight()
  9. Array.every()
  10. Array.some()
  11. Array.indexOf()
  12. Array.lastIndexOf()
  13. JSON.parse()
  14. JSON.stringify()
  15. Date.now()
  16. 属性 Getter 和 Setter
  17. 新的对象属性和方法

ECMAScript 5 语法更改

  1. 对字符串的属性访问 [ ]
  2. 数组和对象字面量中的尾随逗号
  3. 多行字符串字面量
  4. 作为属性名称的保留字

"use strict" 指令

“use strict” 定义 JavaScript 代码应该以“严格模式”执行。

例如，使用严格模式，不能使用未声明的变量。

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码，例如阻止您使用未声明的变量。

“use strict” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。

请阅读 JS 严格模式 中的更多内容。

String.trim()

String.trim() 删除字符串两端的空白字符。

示例代码：

var str = "       Hello World!        ";
alert(str.trim());

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String.trim()</h1>
<p>点击这个按钮来输出已删除空白字符的字符串。</p>
<button onclick="myFunction()">试一试</button>
<p><strong>注释：</strong>Internet Explorer 8 或更低版本不支持 trim() 方法。</p>
<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim());
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 字符串方法 中阅读更多内容。

Array.isArray()

isArray() 方法检查对象是否为数组。

示例代码：

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.isArray()</h1>
<p>单击按钮以检查“fruits”是否为数组。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组 中阅读更多内容。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数。

示例代码：

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.forEach()</h1>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
  txt = txt + value + "<br>"; 
}
</script>
</body>
</html>

运行结果：

Javascript Array.forEach()

为每个数组元素调用一次函数。

45
4
9
16
25

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.map()

这个例子给每个数组值乘以 2：

示例代码：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.map()</h1>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
  return value * 2;
}
</script>
</body>
</html>

运行结果：

Javascript Array.map()

通过对每个数组元素执行函数来创建新数组。

90,8,18,32,50

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.filter()

此例用值大于 18 的元素创建一个新数组：

示例代码：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.filter()</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
  return value > 18;
}
</script>
</body>
</html>

运行结果：

Javascript Array.filter()

使用通过测试的所有数组元素创建一个新数组。

45,25

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.reduce()

这个例子确定数组中所有数的总和：

示例代码：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduce()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
  return total + value;
}
</script>
</body>
</html>

运行结果：

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.reduceRight()

这个例子同样是确定数组中所有数的总和：

示例代码：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.reduceRight()</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
  return total + value;
}
</script>
</body>
</html>

运行结果：

Javascript Array.reduceRight()

此例确定数组中所有数字的总和：

The sum is 99

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.every()

这个例子检查是否所有值都超过 18：

示例代码：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.every()</h1>
<p>every() 方法检查所有数组值是否通过测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
  return value > 18;
}
</script>
</body>
</html>

运行结果：

Javascript Array.every()

every() 方法检查所有数组值是否通过测试。

All over 18 is false

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.some()

这个例子检查某些值是否超过 18：

示例代码：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.some()</h1>
<p>some() 方法检查某些数组值是否通过了测试。</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;
function myFunction(value) {
  return value > 18;
}
</script>
</body>
</html>

运行结果：

Javascript Array.some()

some() 方法检查某些数组值是否通过了测试。

Some over 18 is true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

Array.indexOf()

检索数组中的某个元素值并返回其位置：

示例代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.indexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple 被找到的位置是：" + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 indexOf()。</p>
</body>
</html>

运行结果：

Javascript Array.indexOf()

Apple 被找到的位置是：1

Internet Explorer 8 或更早的版本不支持 indexOf()。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾处开始检索。

示例代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array.lastIndexOf()</h1>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + (a + 1);
</script>
<p>Internet Explorer 8 或更早的版本不支持 lastIndexOf()。</p>
</body>
</html>

运行结果：

Javascript Array.lastIndexOf()

Apple is found in position 3

Internet Explorer 8 或更早的版本不支持 lastIndexOf()。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 数组迭代方法 中学习更多内容。

JSON.parse()

JSON 的一个常见用途是从 Web 服务器接收数据。

想象一下，您从Web服务器收到这条文本字符串：

'{"name":"Bill", "age":62, "city":"Seatle"}'

JavaScript 函数 JSON.parse() 用于将文本转换为 JavaScript 对象：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>用 JSON 字符串创建对象</h1>
<p id="demo"></p>
<script>
var txt = '{"name":"Bill Gates", "age":62, "city":"Seattle"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>

运行结果：

用 JSON 字符串创建对象

Bill Gates, 62

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在我们的 JSON 教程 中学习更多内容。

JSON.stringify()

JSON 的一个常见用途是将数据发送到Web服务器。

将数据发送到 Web 服务器时，数据必须是字符串。

想象一下，我们在 JavaScript 中有这个对象：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

请使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。

var myJSON = JSON.stringify(obj);

结果将是遵循 JSON 表示法的字符串。

myJSON 现在是一个字符串，准备好发送到服务器：

示例代码：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1> JSON.stringify() 创建 JSON 字符串</h1>
<p id="demo"></p>
<script>
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

运行结果：

JSON.stringify() 创建 JSON 字符串

{"name":"Bill","age":62,"city":"Seatle"}

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在我们的 JSON 教程 中学习更多内容。

Date.now()

Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数。

示例代码：

var timInMSs = Date.now();

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date.now()</h1>
<p>Date.now() 是ECMAScript 5（2009）中的新功能：</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

运行结果：

Javascript Date.now()

Date.now() 是ECMAscript 5（2009）中的新功能：

1653012051248

1653012051248

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Date.now() 的返回与在 Date 对象上执行 getTime() 的结果相同。

请在 JS 日期 中学习更多。

属性 Getter 和 Setter

ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。

这个例子为名为 fullName 的属性创建一个 getter：

示例代码：

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例为名为 fullName 的属性创建一个 getter。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

运行结果：

Javascript Getter 和 Setter

Getter 和 Setter 允许您通过方法获取和设置属性。

此例为名为 fullName 的属性创建一个 getter。

Bill Gates

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

这个例子为语言属性创建一个 setter 和一个 getter：

示例代码：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// 使用 setter 设置对象属性：
person.lang = "en";
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例为 language 属性创建 setter 和 getter。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// 使用 setter 设置对象属性：
person.lang = "en";
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
</html>

运行结果：

Javascript Getter 和 Setter

Getter 和 Setter 允许您通过方法获取和设置属性。

此例为 language 属性创建 setter 和 getter。

en

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

这个例子使用 setter 来确保语言的大写更新：

示例代码：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};
// 使用 setter 设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例具有修改的 setter 以保护语言的大写更新。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(value) {
     this.language = value.toUpperCase();
  }
};
// 使用 setter 设置对象属性：
person.lang = "en";
// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>

运行结果：

Javascript Getter 和 Setter

Getter 和 Setter 允许您通过方法获取和设置属性。

此例具有修改的 setter 以保护语言的大写更新。

EN

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请在 JS 对象访问器 中学习更多有关 Getter 和 Setter 的知识。

新的对象属性和方法

Object.defineProperty() 是 ES5 中的新对象方法。

它允许您定义对象属性和/或更改属性的值和/或元数据。

示例代码：

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

完整实例：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 枚举属性
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行结果：

JavaScript defineProperty()

Bill
Gates
EN

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

示例代码：

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 枚举属性：
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行结果：

JavaScript defineProperty()

Bill
Gates

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

此例创建一个 setter 和 getter 来确保语言的大写更新：

示例代码：

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
};
// 更改属性：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// 更改语言
person.language = "en";
// 显示语言
document.getElementById("demo").innerHTML = person.language;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
};
// 更改属性：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// 修改语言：
person.language = "en";
// 显示语言：
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>

运行结果：

Javascript defineProperty()

EN

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

ES5 新的对象方法

ECMAScript 5 为 JavaScript 添加了许多新的对象方法：

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 将所有属性作为数组返回
Object.getOwnPropertyNames(object)
// 将可枚举属性作为数组返回
Object.keys(object)
// 访问原型
Object.getPrototypeOf(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（而不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)

请在 对象 ECMAScript5 中学习更多内容。

对字符串的属性访问

charAt() 方法返回字符串中指定索引（位置）的字符：

示例代码：

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>charAt() 方法返回字符串中给定位置的字符：</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

运行结果：

Javascript 字符串方法

charAt() 方法返回字符串中给定位置的字符：

H

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

ECMAScript 5 允许对字符串进行属性访问：

示例代码：

var str = "HELLO WORLD";
str[0];                   // 返回 H

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>ECMAScript 5 字符串的属性访问：</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

运行结果：

Javascript 字符串方法

ECMAscript 5 字符串的属性访问：

H

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

对字符串的属性访问可能有点不可预测。

请在 JS 字符串方法 中学习更多内容。

尾随逗号(Trailing Commas)

ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

Object 实例

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Array 实例

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

警告！！！

Internet Explorer 8 将崩溃。

JSON 不允许使用尾随逗号。

JSON 对象：

// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 数组：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

多行字符串

如果使用反斜杠转义，ECMAScript 5 允许多行的字符串文字（字面量）：

示例代码：

"Hello 
Kitty!";

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>您可以使用反斜杠在文本字符串中断开代码行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
Dolly!";
</script>
</body>
</html>

运行结果：

Javascript 字符串

您可以使用反斜杠在文本字符串中断开代码行。

Hello Dolly!

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

方法可能没有得到普遍的支持。

较旧的浏览器可能会以不同的方式处理反斜杠周围的空格。

一些旧的浏览器不允许 字符后面的空格。

分解字符串文字的一种更安全的方法是使用字符串添加：

示例代码：

"Hello " + 
"Kitty!";

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>打破字符串中代码行的最安全方法是使用字符串添加。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>

运行结果：

Javascript 字符串

打破字符串中代码行的最安全方法是使用字符串添加。

Hello Dolly!

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

保留字作为属性名称

ECMAScript 5 允许保留字作为属性名称：

对象实例

var obj = {name: "Bill", new: "yes"}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>
<p>ECMAScript 5 允许保留字作为属性名称：</p>
<p id="demo"></p>
<script>
var obj = {name: "Bill", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>
</body>
</html>

运行结果：

ECMAscript 5

ECMAscript 5 允许保留字作为属性名称：

yes

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

ES5（ECMAScript 5）浏览器支持

Chrome 23、IE 10 和 Safari 6 是第一批完全支持 ECMAScript 5 的浏览器：

         
Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012 年 9 月 2012 年 9 月 2013 年 4 月 2012 年 7 月 2013 年 7 月

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024