js replace 的用法

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2649 天前的主题，其中的信息可能已经有所发展或是发生改变。

  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]

6 条回复 • 2017-08-31 10:24:49 +08:00

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 via Android

autoxbc 写的不错，不过看上去是 return $0 == '@' && index < 9 ? '0' + (index + 1) : index + 1

我觉得他按映射写应该是为了方便以后增加别的字符进去，捕获组也可能是为了下一步在旁边跟另一个捕获组。很难说

bombless

2017-08-31 10:24:49 +08:00 via Android

哈哈，绕进去了，$0 为 @这种情况并不存在，这个位置其实永远都替换为 index + 1