js replace 的用法

2017-08-30 16:32:58 +08:00
 yantianqi
  function nihaoa(b,index){
      return b = b.replace(/(@|!|!)/g, function($0, $1) {
        return {
          "@": index<9?"0"+(index+1):(index+1),
          "!": index+1,
          "!": index+1
        }[$1];
      });
    }

其中$0,$1 是做什么的?
为什么返回的对象后面还跟着一个[$1]

2531 次点击
所在节点    程序员
6 条回复
moochan
2017-08-30 17:49:14 +08:00
传入$0 和$1 到函数中然后会返回一个值,这个值是 replace 的实际参数。
autoxbc
2017-08-30 19:47:13 +08:00
假设题主知道 replace 的常规用法
也知道第二个参数可以是一个函数
也知道正则中的 $1 $2 ... $9 表示捕获组

这个 $0 $1 没有任何实际意义,就是 function 的第一个形参名,第二个形参名
这里用 function(a,b) 代替没有任何区别

参考 MDN 中 replace 的说明
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

第一个参数表示整体匹配字符串,也就是正则中的 $&
第二个参数是第一个捕获组,也就是 $1

这里代码的编写者用 $0 $1 作为变量名,来对应 $& $1
可以理解为一种语义上的强迫症
如果不是 $& 是非法的变量名,他一定会用 function( $& , $1 )

第二个 return 后面是一个映射结构,拆开写就好理解了
var ys = { '我':'me' , '你':'you' };
ys['你'];
// "you"

合起来是这样
{ '我':'me' , '你':'you' }['你']

对于三种被替换的字符 @ ! !,代码编写者希望有三种替换操作
将捕获组输入映射,得到三种对 index 的补全,用来替换三种字符
Mutoo
2017-08-30 21:17:37 +08:00
在正则表达式的语意中,用 $0 代表整个字符串 $1 代表第一个捕获( capture )
这两个变量名取得非常好。
autoxbc
2017-08-30 23:24:06 +08:00
尽管这个变量名取的符合语义,整体代码却不够好

比如替换函数用了两个参数是多余的,用一个就可以了
比如再赋值 b 没有意义
比如后面的映射结构过于复杂

function nihaoa(b,index){
   return b.replace( /@|!|!/g , function($0) {
     return ( $0 == '@' && index < 9 ? '0' + index : index ) + 1 ;
  });
}
bombless
2017-08-31 10:22:35 +08:00
autoxbc 写的不错,不过看上去是 return $0 == '@' && index < 9 ? '0' + (index + 1) : index + 1

我觉得他按映射写应该是为了方便以后增加别的字符进去,捕获组也可能是为了下一步在旁边跟另一个捕获组。很难说
bombless
2017-08-31 10:24:49 +08:00
哈哈,绕进去了,$0 为 @这种情况并不存在,这个位置其实永远都替换为 index + 1

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/386919

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX