JS编程建议——37:推荐使用replace(2)

简介: 37:推荐使用replace(2)

建议37:推荐使用replace(2)
在上面的示例代码中,函数f()的参数为特殊字符“$1”,它表示正则表达式/(bw+b)/中小括号每次匹配的文本。然后在函数体内对这个匹配文本进行处理,截取其首字母并转换为大写形式,之后返回新处理的字符串。replace方法能够在原文本中使用这个返回的新字符串替换每次匹配的子字符串。
对于上面的示例,可以使用小括号来获取更多匹配文本的信息。例如,直接利用小括号传递单词的首字母,然后进行大小写转换处理:

  1. var s = 'script language = "javaScript" type= " text / javaScript"';
  2. var f = function($1,$2,$3){
  3. return $2.toUpperCase()+$3;
  4. }
  5. var a = s.replace( /b(w)(w*)b/g, f );
    //Script Language = "JavaScript" Type = " Text /JavaScript"

在函数f()中,第一个参数表示每次匹配的文本,第二个参数表示第一个小括号的子表达式所匹配的文本,即单词的首字母,第二个参数表示第二个小括号的子表达式所匹配的文本。
实际上,replace方法的第二个参数(函数式参数)不需要传递任何形参,replace方法依然会向它传递多个实参,这些实参都包含一定的意思,具体说明如下:
第一个参数表示与匹配模式相匹配的文本,如上面示例中每次匹配的单词字符串。
其后的参数是与匹配模式中子表达式相匹配的字符串,参数个数不限,根据子表达式数而定。
后面的参数是一个整数,表示匹配文本在字符串中的下标位置。
最后一个参数表示字符串自身。
例如,将上面示例中替换文本函数改为如下形式。

  1. var f = function(){
  2. return arguments[1].toUpperCase()+arguments[2];
  3. }
    如果不为函数传递形参,直接调用函数的arguments属性,同样能够读取到正则表达式中相关匹配文本的信息。

arguments[0]表示每次匹配的单词。
arguments[1]表示第一个子表达式匹配的文本,即单词的首字母。
arguments[2]表示第二个子表达式匹配的文本,即单词的余下字母。
arguments[3]表示匹配文本的下标位置,如第一个匹配单词“script”的下标位置就是0,依此类推。
arguments[4]表示要执行匹配的字符串,这里表示“script language = "javascript" type= " text / javascript"”。

  1. var s = 'script language = "javascript" type= " text / javascript"';
  2. var f = function(){
  3. for( var i = 0; i < arguments.length; i ++ ){
  4. alert("第"+(i+1)+"个参数的值:"+arguments[i]);
  5. }
  6. }
  7. var a = s.replace( /b(w)(w*)b/g, f );
    在函数体中,使用for循环结构遍历argumnets属性,每次匹配单词时,都会弹出5次提示信息,分别显示上面所列的匹配文本信息。其中,arguments[1]、arguments[2]会根据每次匹配文本不同,分别显示当前匹配文本中子表达式匹配的信息,arguments[3]显示当前匹配单词的下标位置。而arguments[0]总是显示每次匹配的单词,arguments[4]总是显示被操作的字符串。

例如,下面代码能够自动提取字符串中的分数,进行汇总后算出平均分,然后利用replace方法提取每个分值,与平均分进行比较以决定替换文本的具体信息。

  1. var s = "张三56分,李四74分,王五92分,赵六84分";
  2. var a = s.match( /d+/g ), sum = 0;
  3. for( var i= 0 ; i
  4. sum += parseFloat(a[i]);
};var avg = sum / a.length;function f(){var n = parseFloat(arguments[1]);return n + "分" + " ( " + (( n > avg ) ? ( "超出平均分" + ( n - avg ) ) :( "低于平均分" + ( avg - n ) )) + "分 ) ";}var ss1 = s.replace( /(d+)分/g, f );
alert( s1 );/ "张三56分(低于平均分20.5分),李四74分(低于平均分2.5分),王五92分(超出平均分15.5分), 赵六84分 ( 超出平均分7.5分)"/

在上面的示例中,遍历数组时不能够使用for in语句,因为这个数组中还存储着其他相关的匹配文本信息。应该使用for结构来实现。由于截取的数字都是字符串类型,所以应该把它们都转换为数值类型,否则会被误解,如把数字连接在一起,或者按字母顺序进行比较等。

相关文章
|
4月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
5月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
63 3
|
2月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
37 3
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
28 2
|
4月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
4月前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
4月前
|
JavaScript 前端开发 安全
JavaScript编程实现字符和字符串翻转
JavaScript编程实现字符和字符串翻转
|
4月前
|
JavaScript 前端开发
用JavaScript编程定义二维数组并初始化,然后输出元素值
用JavaScript编程定义二维数组并初始化,然后输出元素值
|
5月前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
49 2
|
5月前
|
JavaScript 前端开发 Oracle