Javascript中字符串直接量与new String的区别

简介: 通过String直接创建的字符串和字符串表面量为基本数据类型,属于JavaScript中的直接量(包含数字,以及数组、对象和正则表达式、数字和布尔值的直接量格式)。 通过 New String来实例化的是一个String对象, 所以我们可以调用String对象的方法。

字符串的创建

JS中创建字符串的方法主要有三种:

  1. 字符串表面量,var a = "foo"
  2. 通过 New String来实例化的是一个String对象,var b = new String("foo")
  3. 使用string函数转换, var c = String("foo")

通过String直接创建的字符串和字符串表面量为基本数据类型,属于JavaScript中的直接量(包含数字,以及数组、对象和正则表达式、数字和布尔值的直接量格式)。

通过 New String来实例化的是一个String对象, 所以我们可以调用String对象的方法。

测试题

请确认以下的控制台打印的结果

var a = "foo";
var b = new String("foo");
var c = String("foo");


console.log(a == b);  
console.log(a.repeat === b.repeat); 
console.log(a === b); 
console.log(a === c); 

相等操作符

确定两个变量是否相等是编程中的一个非常重要的操作。在比较字符串、数值和布尔值的相等性时, 问题还比较简单。但在涉及到对象的比较时,问题就变得复杂了。早的 ECMAScript中的相等和不等 操作符会在执行比较之前,先将对象转换成相似的类型。后来,有人提出了这种转换到底是否合理的质 疑。后,ECMAScript 的解决方案就是提供两组操作符:

  • 相等和不相等——先转换再比较
  • 全等和不全等——仅比较而不转换

相等(==)和不相等(!=

ECMAScript中的相等操作符由两个等于号(==)表示,如果两个操作数相等,则返回 true。而不 相等操作符由叹号后跟等于号(!=)表示,如果两个操作数不相等,则返回true。这两个操作符都会 先转换操作数(通常称为强制转型),然后再比较它们的相等性。

转换不同的数据类型时,相等和不相等操作符遵循下列基本规则:

  • 如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false 转换为 0,而 true 转换为 1;
  • 如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值;
  • 如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf()方法,用得到的基本类 型值按照前面的规则进行比较;

这两个操作符在进行比较时则要遵循下列规则:

  • null 和 undefined 是相等的。
  • 要比较相等性之前,不能将 null 和 undefined 转换成其他任何值。
  • 如果有一个操作数是 NaN,则相等操作符返回 false,而不相等操作符返回 true。重要提示: 即使两个操作数都是 NaN,相等操作符也返回 false;因为按照规则,NaN 不等于 NaN。
  • 如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象, 则相等操作符返回 true;否则,返回 false。

全等(===)和不全等(!==

除了在比较之前不转换操作数之外,全等和不全等操作符与相等和不相等操作符没有什么区别。全 等操作符由 3个等于号(===)表示,它只在两个操作数未经转换就相等的情况下返回 true

习题详解

var a = "foo";
var b = new String("foo");
var c = String("foo");

console.log(a); // >foo
console.log(b); // >String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
console.log(c); // >foo


console.log(typeof a); // >"string"
console.log(typeof b); // >"object"
console.log(typeof c); // >"string"


console.log(a == b); // >true
console.log(a.repeat === b.repeat); //> true
console.log(a === b); // >false
console.log(a === c); // >true

根据JS的语法,要满足相等(==)的条件如下:

在类型转换之后

  1. 如果是引用类型,则两个变量必须指向同一个对象(同一个地址);
  2. 如果是基本类型,则两个变量除了类型必须相同外,值还必须相等。

根据JS的语法,要满足全等(===)的条件如下:

  1. 如果是引用类型,则两个变量必须指向同一个对象(同一个地址);
  2. 如果是基本类型,则两个变量除了类型必须相同外,值还必须相等。

console.log(a == b); // >true

相等操作符,变量a不是对象,变量b是对象调用对象的 valueOf()方法用得到的基本类 型值为“foo”,与变量a进行比较,相等。

var a = "foo";
var b = new String("foo");

console.log(a); // >foo
console.log(b); // >String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
console.log(b.valueOf());//>"foo"

console.log(a == b); // >true

console.log(a.repeat === b.repeat); //> true

变量a和c是一个primitive值(原生值),一个primitive值不会拥有自己的属性与方法。

但是,当我们尝试访问一个原生值的属性时,JS引擎内部会调用一个内置[[toObject]] 方法,将字面量的”foo”转为一个[[PrimitiveValue]]”foo”的String对象,然后从其原型链中尝试查找需要访问的属性,使用结束后再释放掉这个String对象。

var a = "foo";
var c = String("foo");

console.log(typeof a); // >"string"
console.log(typeof c); // >"string"

变量b是一个primitive类型(primitive类型:Undefined, Null, Boolean, String, Number)的实例,它有一个值为实例化String类型时所传入的参数的内置属性[[PrimitiveValue]],这个String的实例享有String.prototype上所有的方法。

var b = new String("foo");
console.log(typeof b); // >"object"

变量a和变量b访问的时同一个对象的方法,全等成立,返回true。

var a = "foo";
var b = new String("foo");

console.log(a); // >foo
console.log(b); // >String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
console.log(a.repeat); //> ƒ repeat() { [native code] }
console.log(b.repeat); //> ƒ repeat() { [native code] }
console.log(a.__proto__); //> String {"", f: ƒ, format: ƒ, constructor: ƒ, anchor: ƒ, …}
console.log(b.__proto__); //> String {"", f: ƒ, format: ƒ, constructor: ƒ, anchor: ƒ, …}
console.log(a.__proto__===b.__proto__); //> true

console.log(a.repeat === b.repeat); //> true

console.log(a === b); // >false

变量a为字符串,变量b为对象,不全等。

var a = "foo";
var b = new String("foo");

console.log(a); // >"foo"
console.log(b); // >String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
console.log(typeof a); // >"string"
console.log(typeof b); // >"object"

console.log(a === b); // >false

console.log(a === c); // >true

变量a和c均为primitive值(原生值),类型为字符串,值也相等。

var a = "foo";
var c = String("foo");

console.log(a); // >foo
console.log(c); // >foo


console.log(typeof a); // >"string"
console.log(typeof c); // >"string"

console.log(a === c); // >true

注意事项

由于相等和不相等操作符存在类型转换问题,而为了保持代码中数据类型的完整 性,我们推荐使用全等和不全等操作符。

参考资料

JavaScript高级程序设计(第三版)

Javascript中字符串直接量与new String的区别

相关文章
|
20天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
20 7
|
14天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
2天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
12 0
|
6天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
7天前
|
JavaScript 前端开发
js字符串拼接
js字符串拼接
|
存储 编译器 Linux
标准库中的string类(中)+仅仅反转字母+字符串中的第一个唯一字符+字符串相加——“C++”“Leetcode每日一题”
标准库中的string类(中)+仅仅反转字母+字符串中的第一个唯一字符+字符串相加——“C++”“Leetcode每日一题”
|
10天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
13天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
12 0
|
13天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
19 1