故事背景："0"和"1"布尔判断

这几天开发，遇到一个问题：根据后端返回的isCritical判断页面是否展示【关键标签】

很难受的是，后端的isCritical的枚举值是字符串

”0“： 非关键
”1“ ：关键

这意味着前端得自己转换一下，于是我写出了这样的代码

// html
<van-icon v-if="getCriticalStatus(it.isCritical)" color="#E68600"/>

// js
const getCriticalStatus = (critical: string) => {
   
    if (critical.value === "1") return true;
    return false;
}

我以为我这样写很简单了，没想到同事看到后，说我这样写麻烦了，于是给我改了一下代码

// html
<van-icon v-if="+it.isCritical" color="#E68600"/>

我大惊失色脱水缩合，这就行了？看来，我还是小看"+"运算符了！

"+"的常见使用场景

前端对"+"连字符一定不陌生，它的算术运算符功能和字符串连接功能，我们用脚趾头也能敲出来。

算术运算符

在 JavaScript 中，+ 是最常见的算术运算符之一，可以用来执行加法运算。

let a = 5;
let b = 10;
let sum = a + b; 
// sum的值为15

字符串连接符

+ 还可以用来连接字符串。

let firstName = "石";
let lastName = "小石";
let fullName = firstName + " " + lastName; // fullName的值为"石小石"

如果是数字和字符连接，它会把数字转成字符

const a = 1
const b = "2"
const c = a + b; // c的值为字符串"12"

"+"的高级使用场景

除了上述的基本使用场景，其实它还有一些冷门但十分使用的高级使用场景。

URL编码中的空格

在 URL 编码中，+ 字符可以表示空格，尤其是在查询字符串中。

http://shixiaoshi.com/search?query=hello+world

上面的代码中，hello+world 表示查询 hello world，其中的 + 会被解码为一个空格。

但要注意的是，现代 URL 编码规范中推荐使用 %20 表示空格，而不是 +。

一元正号运算符

+ 的高级用法，再下觉得最牛逼的地方就是可以作为一元运算符使用！

+ 作为一元运算符时，可以将一个值转换为数字（如果可能的话）。

let str = "123";
let num = +str; 
// num的值为123，类型为number

这一用法在处理表单输入时特别有用，因为表单输入通常是字符串类型。

let inputValue = "42";
let numericValue = +inputValue; // 将字符串转换为数字42

那么回到文章开头的问题，我们看看下面的代码为什么可以生效

// html
<van-icon v-if="getCriticalStatus(it.isCritical)" color="#E68600"/>

// js
const getCriticalStatus = (critical: string) => {
    if (critical.value === "1") return true;
    return false;
}

// html   优化后的代码
<van-icon v-if="+it.isCritical" color="#E68600"/>

由于it.isCritical的值是字符"0"或"1"，通过"+it.isCritical"转换后，其值是数字0或1，而恰好0可以当false使用，1可以当true使用！因此，上述代码可以生效！

JavaScript 中的类型转换规则会将某些值隐式转换为布尔值：

• 假值 ：在转换为布尔值时被视为 false 的值，包括：false、0 （数字零）、-0 （负零）、"" （空字符串）、null、undefined、NaN （非数字）
• 真值 ：除了上述假值外，所有其他值在转换为布尔值时都被视为 true。

一元正号运算符的原理

通过上文，我们知道：当使用 + 操作符时，JavaScript 会尝试把目标值转换为数字，它遵循以下规则：。

转换规则

数字类型：

如果操作数是数字类型，一元正号运算符不会改变其值。
例如：+5 还是 5。

// 数字类型
console.log(+5); // 5（数字）

字符串类型：

如果字符串能够被解析为有效的数字，则返回相应的数字。
如果字符串不能被解析为有效的数字（如含有非数字字符），则返回 NaN（Not-a-Number）。
例如：+"123" 返回 123，+"abc" 返回 NaN。

// 字符串类型
console.log(+"42"); // 42
console.log(+"42abc"); // NaN

布尔类型：

true 会被转换为 1。
false 会被转换为 0。

// 布尔类型
console.log(+true); // 1
console.log(+false); // 0

null：

null 会被转换为 0。

// null 
console.log(+null); // 0

undefined：

undefined 会被转换为 NaN。

//  undefined
console.log(+undefined); // NaN

对象类型：

对象首先会通过内部的 ToPrimitive 方法被转换为一个原始值，然后再进行数字转换。通常通过调用对象的 valueOf 或 toString 方法来实现，优先调用 valueOf。

// 对象类型
console.log(+{
   }); // NaN
console.log(+[]); // 0
console.log(+[10]); // 10
console.log(+["10", "20"]); // NaN

底层原理

不重要，简单说说：

在 JS引擎内部，执行一元正号运算符时，实际调用了 ToNumber 抽象操作，这个操作试图将任意类型的值转换为数字。ToNumber 操作依据 ECMAScript 规范中的规则，将不同类型的值转换为数字。

总结

一元正号运算符 + 是一个简便的方法，用于将非数字类型转换为数字。

如果你们后端返回字符串0和1，你需要转换成布尔值，使用"+"简直不要太爽

// isCritical 是字符串"0"或"1"
<van-icon v-if="+isCritical" color="#E68600"/>

或者处理表单输入时用

let inputValue = "42";
let value = +inputValue; // 将字符串转换为数字42