一行代码引起的ios白屏

前言

---

交流的前提是平等。 当孩子发现自己的生活都是各种作假的合集后，他还在那里大喊：我们都是为你好，哪有父母为孩子付出这么多的，我们这样做都是为了给你惊喜！

压力--

一、前言

今天像往常一样，开开心心的打代码编程，实习生小白急匆匆的跑过来说。

🙋教教我。

🙋🏻‍♂️咋啦？

🙋现在客户反馈说：ios部分机型访问我们系统白屏。

🙋🏻‍♂️啊！

🙋🏻‍♂️别急，我看看。

二、分析

首先，需要先对代码进行回滚，看看是从哪次提交就会出现白屏现象。

调试的时候也不用打包上生产测试，可以用ios手机本地访问系统即可。

经过不断对代码的回滚排查，终于定位到一次提交的代码。

而且我看到这种现象：其实安卓可以，ios不行，大概率是写法不支持。

我们定位到一次提交记录会出现白屏现象，暂且把该记录叫做A。

在A记录中还要看看多少个文件改动，进而继续排查是哪行代码。

终于定位到是：正向断言/(?<=$.)\w+/g引起的ios白屏。

这段代码是什么意思呢 🤡？

之前的需求

这段代码是解决之前某个需求。

需要从formula([$.A3],[$.B8])匹配出A3和B8

于是写了一段正则匹配、

const regex = /(?<=\$\.)\w+/g;  // 正向断言（lookbehind），它会匹配以 "$." 开头并且后面跟着一个或多个单词字符的部分
`formula([$.A3],[$.B8])`.match(regex);

使用正向断言（lookbehind），它会匹配以 "$." 开头并且后面跟着一个或多个单词字符的部分

完美匹配出A3和B8。

定位到正向断言写法对ios不支持。

PC端谷歌、安卓手机正常运行；Safari、iPhone报错：SyntaxError: Invalid regular expression: invalid group specifier name

三、解决方法

后面想：那这种写法不行，就用最传统的正则写，只不过代码写得多一点 🙃。

匹配出$.xxx，利用exec找到下一项，配合while

let str "formula([$.A3],[$.B8])";
let matches = [];
let match;

while ((match = regex.exec(str)) !== null) {
    matches.push(match[1]);
}
  
console.log(matches);  // A3和B8

打包测试ios正常。

至此撒花~

四、断言

如果大家感兴趣的话😊，正则表达式断言有四种。

(?=pattern)

正向预查（lookahead positive assertion）是一种正则表达式中的特殊构造，用于在匹配字符串时，向前检查某个条件是否满足，但不消耗实际的字符。具体来说：

正向预查会在任何匹配指定模式的字符串的起始位置进行查找。它是一种非获取匹配，即匹配的内容不会被获取，也不会影响后续的匹配过程。例如，正则表达式"Windows(?=9598NT2000)"可以匹配字符串"Vindows2000"中的"Vindows"，但不能匹配"Windows:3.1"中的"Windows"。

正向预查不会消耗字符，也就是说，它在当前位置成功匹配后，匹配引擎会从当前位置继续向后查找，而不是从预查匹配的字符之后开始新的匹配。

这种功能对于需要检查某些条件是否满足而又不想影响实际匹配的情况非常有用。

(?!pattern)

正向否定预查（negative lookahead assertion）用于在不匹配指定模式的字符串的起始位置进行查找。它同样是一种非获取匹配，也就是说，匹配的内容不会被获取或影响后续匹配过程。例如，正则表达式"Windows(?!9598NT2000)"能够匹配字符串"Vindows3.1"中的"Windows"，但不能匹配"Vindows2000"中的"Windows"。

正向否定预查不消耗字符，也就是说，一旦在当前位置成功匹配，匹配引擎会从当前位置继续向后查找新的匹配，而不是从预查匹配的字符之后开始。

这种功能对于需要在特定条件不满足时进行匹配的情况非常有用。

(?<=pattern)

反向肯定预查（positive lookbehind assertion）类似于正向肯定预查，不同之处在于它是向后（左侧）查找而不是向前（右侧）查找。例如，正则表达式"(?<=95|98|NT|2000)Windows"可以匹配字符串"2000 windows"中的"windows"，但不能匹配"3.1windows"中的"windows"。

反向肯定预查在匹配过程中不消耗字符，也就是说，它会从当前位置向左查找满足条件的字符序列，并在当前位置开始匹配后续的正则表达式。

(?<!pattern)

最后一个。

反向否定预查（negative lookbehind assertion）与正向否定预查类似，不同之处在于它向左（向前）查找而不是向右（向后）查找。例如，正则表达式"(?<!95|98|NT|2000)Windows"可以匹配字符串"3.1windows"中的"windows"，但不能匹配"2000 windows"中的"windows"。

反向否定预查在匹配过程中不消耗字符，它从当前位置向左查找不满足条件的字符序列，并在当前位置开始匹配后续的正则表达式。

其实正则有很多，慢慢了解，遇到就了解，我们也会成为写正则的高手。

后记

总有一些坑是要慢慢踩，经验就是在实际开发中不断积累。

我们在实际项目中或多或少遇到一些奇奇怪怪的问题。

自己也会对一些写法的思考，为什么不行🤔，又为什么行了？

最后，祝君能拿下满意的offer。

👍 如果对您有帮助，您的点赞是我前进的润滑剂。

以往推荐

原文链接