前端开发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
AI 代码解读

刚开始我第一反应想到的是隐式转换埋下的坑,其实并不是,直接将上面的日期字符串 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
AI 代码解读

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

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

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

a > b // true
AI 代码解读
目录
打赏
0
0
0
0
68
分享
相关文章
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
71 23
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
54 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
132 63
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
72 13
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
190 57
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
120 5
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
164 1
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
92 4
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
54 2

热门文章

最新文章