JS 中 "9" > "14" 的结果为 true，为什么不会隐式转换?

Question

问题描述

在日常开发中我们经常会使用一对 input:number 来实现一个区间筛选功能。但是这次我遇到了在判断 if(this.min > this.max) 时的错误情况。
就是当 this.min = 9 且 this.max = 14 时，这个判断条件的结果为 true。

问题出现的环境背景及自己尝试过哪些方法

看起来是因为即使是 number 类型的 input 元素，绑定的值其实依旧为 String 类型。
使用 v-model.number 或者在比较时使用 Number() 包裹两个值进行比较即可解决问题。

相关代码

<template>
  <div>
    <input type="number" v-model="min" />
    <input type="number" v-model="max" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      min: null,
      max: null,
    };
  },
  watch: {
    min(value) {
      if (value > this.max) {
        this.min = this.max;
      }
    },
    max(value) {
      if (value < this.min) {
        this.max = this.min;
      }
    },
  },
};
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

为什么会出现 "9" > "14" 的比较不会进行隐式转换？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

字符串比较的算法是将每个字符的ascii码或unicode码依次进行比大小，有点像数字比大小的算法，前面的字符比大小结果出来了后面的就不会再比了。

比如:

'b' > 'abc'

因为b的ascii码比a大，所以有'b' > 'abc'，同理，"9" < "14"，因为9的acsii码在1之后，比1的ascii码大

Answer 2

字符串是可以比较的，比如 "b" > "a" 。

两个字符串比较不会转换成 number 。

Answer 3

字符串比较，默认按字典序进行对比的吧。如果其中一个是数字的话，就会发生隐式类型转换。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。