前端开发JavaScript中日期字符串直接比较的坑

简介: 前后端传参或者接受日期时间一般都会格式化成固定格式的字符串,如果格式是规范的 YYYY-MM-DD HH:mm:ss,其实是可以直接比较的,但是如果不规范直接字符串相比较就很容易出问题

前后端传参或者接受日期时间一般都会格式化成固定格式的字符串,如果格式是规范的 YYYY-MM-DD HH:mm:ss,其实是可以直接比较的,但是如果不规范直接字符串相比较就很容易出问题。

let a = '2022-02-28 10:00:00'
let b = '2022-2-28 10:00:00'
let c = '2022-03-01 10:00:00'

c > a // true
c > b // false

刚开始我第一反应想到的是隐式转换埋下的坑,其实并不是,直接将上面的日期字符串 Number 的结果发现都是 null,字符串和字符串相比较并不会先转成数值。

字符串相比较:

  • 如果字符串长度是0的情况,就可以直接比较出大小。
  • 如果长度不为0,是按每个字符的“Unicode 编码”大小进行比较,直到分出大小为止,一句话概括就是按照字典序进行对比

上面的 c > b 之所以跟咱的直觉相悖,因为逐一比到月份时,2和3月前面的0比较,对应的Unicode码(charCodeAt() 方法可返回指定位置的字符的 Unicode 编码,这个返回值是 0 - 65535 之间的整数):

  • 2:50
  • 0:48

即使不看Unicode码,直接看数值我们也能看出来2和0谁大了,最后建议日期比较还是不要这样直接比较,借助第三方库像dayjs提供的方法去比较比较靠谱。

::: tip 提示
unicode:统一码(万国码、单一码),是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案
ASCII码:大多数计算机采用ASCII码(美国标准信息交换码),它是表示所有大小写字母、数字、标点符号和控制字符的7位编码方案。统一码(Unicode)包含ASCII码,'\u0000'到'\u007F'对应全部128个ACSII字符

所以在js里其实是可以用中文做变量名,但是一般不建议使用超出ASCII码的字符,unicode水很深
:::

字符串相比较并不会隐式转换

字符串和字符串相比较并不会出现隐式转换,这一点尤其在数值型字符串相比较时要注意

let a = '0109'
let b = '109'
let c = '11'

c < a // false
c < b // false

像上面的数值型字符串比较时,切记要先转换成数值,然后再来比较。

总结
1、数值和数值可以直接比较,不会出问题
2、数值字符串和数值相比较,数值字符串会自动先转成数值再比较,所以也不会有问题
3、字符串和字符串相比较,这里就容易出问题,一定切记要先转成数值再比较(可以直接用 + 转成数值)

// 2022年6月21日又在项目中踩到这个坑
// 一个日期天数的校验比较,要求前一个要小于或等于后一个
// 因为页面上的初始数据是其他地方同步过来的,如下直接比较,校验一直不过
let a = '4'
let b = '10'

a > b // true
目录
相关文章
|
1月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
48 1
|
1月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
65 41
|
4天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
12天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
30 4
|
12天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
26天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
19 3
|
7天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战