博客

substring()

语法

str.substring(indexStart[, indexEnd])

参数

indexStart

从哪开始截取且包含这个位置的字符（索引号从0开始）

indexEnd

可选

截取到哪且不包含这个位置的字符

• 如果任一参数小于 0 或为 NaN，则被当作0。
• 如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

<div class="box">测试文字苹果香蕉</div>
<!-- length = 8 / index = [0-7] -->
<script>
let box = document.querySelector('.box')
let boxText = box.innerHTML

//"测试文字"
boxText.substring(0, 4)
boxText.substring(4, 0) 
 
//"测试文字苹果香"
boxText.substring(0,7)
boxText.substring(4, 0) 

//"测试文字苹果香蕉"
boxText.substring(0, 8)
boxText.substring(0, 999) 
  
// ""
boxText.substring(3,3)
</script>

返回值

截取下来的字符串

String.prototype.substring() – JavaScript | MDN

slice()

语法

str.slice(beginIndex[, endIndex])

• 返回的字符串也是包含初始值的那个字符，不包含结束值的那个字符
• slice参数可以是负值，而substring不支持
• substring的start和end位置调换也没关系，规则是由数值小的位置到数值大的位置，而slice则不行！

slice()和substring() – 罗颖峰 – 博客园

var str = 'The morning is upon us.';
str.slice(-3);     // 返回 'us.'
str.slice(-3, -1); // 返回 'us'
str.slice(0, -1);  // 返回 'The morning is upon us'

#给_slice()_传入负值索引

创建正则语法

let 变量名 = /表达式/

其中 / / 是正则表达式的字面量

判断是否是有符合规则的字符串

test()： 用来查看字符串是否符合正则规则

• 是符合，返回true
• 不符合，返回false

语法：正则表达式.test(被检测的字符串)

检索（查找）符合规则的字符串

exec()： 在字符串中搜索匹配的字符串部分

语法：正则表达式.exec(被检测字符串)

• 如果匹配成功，则返回一个数组
• 如果匹配失败，则返回一个null

let str = '我是测试文字'
let reg = /文/
let result = reg.exec(str)
console.log(result) // 返回的是一个数组

替换字符串

replace()

//要替换的字符串.replace(正则表达式,替换的内容)
let str = '我是谁 你是谁 他是谁'
let reg = /谁/g
console.log(str.replace(reg, '你'))
//我是你 你是你 他是你

#使用正则表达式

元字符

有特殊含义，可以匹配更多规则，如：/[a-z]/

#使用特殊字符

边界符

表示位置，开头和结尾，必须用什么开头，用什么结尾

边界符	含义
^	匹配输入的开始。
$	匹配输入的结束。

当 ^ 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义.

注意点：当^和$一起使用时，表示精准匹配，从头到尾都要符合，常用语表单校验

量词

表示重复次数

量词	含义
*	重复零次或更多次>=0
+	重复一次或更多次>=1
?	重复0次或1次 0 || 1
{n}	重复n次==n
{n,}	重复n次或更多次>=n
{n,m}	重复n到m次n <= 次数 <= m

注意点： 逗号左右两侧不能出现空格

字符类

特定的字符表示特定的匹配规则

• [xxx] 只要字符串中有[]其中任何一个字符，就匹配成功

console.log(/[abc]/.test('andy')) //a
console.log(/[abc]/.test('baby')) //b

• [] 里面有中划线 - ，表示一个范围 只要字符串的其中一个符合范围，就匹配成功

[0-9] ：0~9的范围
[a-z] ：a~z的范围
[A-Z] ：A~Z的范围
[0-9a-zA-Z] ：0~9 + a~z + A~Z 的范围

• [] 里面有一个^表示取反 只有字符串中有一个符合范围，就匹配成功

[^abc] ：除了abc以外的字符

• . 匹配除换行符以外的任何单个字符（如果加了s标志则可以匹配换行符）

console.log(/.b/.test('abc')) //ab
console.log(/.i/.test('liao')) //li

注意点：换行符指的是js字符串中的换行，是\n，不是<br>

预定义类

预定义类	含义
\d	匹配0-9的任意数字，相当于[0-9]
\D	匹配0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
\W	除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
\s	匹配不可见字符，如：空格、换行\n、制表符tab \t
\S	匹配可见字符

#预定义类

修饰符(标志)

语法：/表达式/修饰符

标志	描述
g	全局搜索
i	不区分大小写搜索
s	允许 . 匹配换行符

console.log(/a/g.test('banana')) //a

console.log(/a/i.test('A')) //A

console.log(/a./s.test('ba na na')) //a空格

#通过标志进行高级搜索

详细内容请前往正则表达式 – JavaScript | MDN

作用

创造一个作用域空间，防止变量冲突或覆盖.

• 立即执行
• 只执行一次
• 执行完毕，立即销毁

两种写法

(function (){}()) //W3C推荐写法

(function (){})()

为什么立即执行函数外面要加(),不加可不可以呢，我们来试一下

function(){ 
   console.log('this is a function')
}()
//Uncaught SyntaxError: Function statements require a function name
//报错，意思是函数声明需要一个函数名

虽然匿名函数属于函数表达式，但未进行赋值，所以javascript解析时将开头的function当做函数声明，故报错提示需要函数名;

立即执行函数里面的函数必须是函数表达式

函数声明和函数表达式区别

let func = function() {
    return 1;
}();
console.log(func) //1 

为什么给一个匿名函数赋值就可以正常了呢？

匿名函数前加了 “=” 有了运算符后，将函数声明转化为函数表达式。

我们可以理解为在匿名函数前加了 “=” 有了运算符后，将函数声明转化为函数表达式。

我们拿！，+，-，（）…等运算符来进行测试：

!function(){
    console.log('this is a function1')
}()
// this is a function1
    
+function(){
    console.log('this is a function2')
}()
// this is a function2
    
-function(){
    console.log('this is a function3')
}()
// this is a function3
    
;(function(){
    console.log('this is a function4')
})()
// this is a function4

由此可见，加运算符确实可将函数声明转化为函数表达式

需要注意的地方

注意在代码console.log(‘this is a function4’)这个函数我在最前面加上了一个“;”(分号) 为什么要加这分号，不加行不行呢，大家可以验证一下。 不加会报错(Uncaught TypeError: (intermediate value)(…) is not a function)

上面的代码有一些多，我们截取一部分来讲

-function(){
    console.log('this is a function3')
}()

(function(){
    console.log('this is a function4')
})()

这段代码一样会报错，因为ECMAScript规范具有分号自动插入规则，但是在上面代码中，在第一个立即执行函数末尾却不会插入，因为第二个立即执行函数，会被解释为如下形式：

-function(){
    console.log('this is a function3')
}()(function(){console.log('this is a function4')})()

因此我们在最后一个立即执行函数前面加一个分号;(是为了防止前一个立即函数尾部没有的分号;) 其实还有其它的方式也可以实现，使用void 运算符，个人感觉这种方式更优雅

-function(){
    console.log('this is a function3')
}()

void (function(){
    console.log('this is a function4')
})()

立即执行函数的应用场景

1、代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等.

2、所有的这些动作只需要执行一次，比如只需要显示一个事件.

3、将代码包裹在它的局部作用域中，不会让任何变量泄漏成全局变量.

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/xu_song/article/details/107077675

函数声明

function func() { console.log('this is a function') };

首先使用 function 关键字声明一个函数，再执行一个函数名，叫函数声明。

函数表达式

let func = function() { console.log('this is a function') };

使用 function 关键字声明一个函数，但未给函数命名，将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数

function() { console.log('this is a function') };

使用 function 关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式区别

1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明，而函数表达式必须等到 JavaScript 引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。

2、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以 func() 形式调用。

我们看一下下面的例子就会明白

函数声明

func(); //正常输出this is a function
function func() {
    console.log('this is a function') 
}; 

函数表达式

func();// Uncaught SyntaxError: Invalid or unexpected token
//函数表达式报错，func未保存对函数的引用，函数调用需放在函数表达式后面
var func = function() { 
    console.log('this is a function') 
}；

版权声明：本文为CSDN博主「xu_song」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/xu_song/article/details/107077675