这几天开发，遇到一个问题：根据后端返回的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的值，包括：
-
false0（数字零）-0（负零）""（空字符串）nullundefinedNaN（非数字）
- 真值 ：除了上述假值外，所有其他值在转换为布尔值时都被视为
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