溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaScript的嚴(yán)格模式怎么開(kāi)啟

發(fā)布時(shí)間:2022-02-08 10:05:56 來(lái)源:億速云 閱讀:196 作者:iii 欄目:web開(kāi)發(fā)

這篇“JavaScript的嚴(yán)格模式怎么開(kāi)啟”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“JavaScript的嚴(yán)格模式怎么開(kāi)啟”文章吧。

JavaScript的嚴(yán)格模式怎么開(kāi)啟

1、嚴(yán)格模式

  • JavaScript 除了提供正常模式外,還提供了嚴(yán)格模式

  • ES5 的嚴(yán)格模式是采用具有限制性 JavaScript 變體的一種方式,即在嚴(yán)格的條件下運(yùn)行 JS 代碼

  • 嚴(yán)格模式在IE10 以上版本的瀏覽器才會(huì)被支持,舊版本瀏覽器會(huì)被忽略

  • 嚴(yán)格模式對(duì)正常的JavaScript語(yǔ)義做了一些更改:

    • 消除了Javascript 語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處,減少了一些怪異行為

    • 消除代碼運(yùn)行的一些不安全之處,保證代碼運(yùn)行的安全

    • 提高編譯器效率,增加運(yùn)行速度

    • 禁用了在 ECMAScript 的未來(lái)版本中可能會(huì)定義的一些語(yǔ)法,為未來(lái)新版本的 Javascript 做好鋪墊。比如一些保留字如:class, enum, export, extends, import, super 不能做變量名

1.1、開(kāi)啟嚴(yán)格模式

  • 嚴(yán)格模式可以應(yīng)用到整個(gè)腳本個(gè)別函數(shù)中。

  • 因此在使用時(shí),我們可以將嚴(yán)格模式分為為腳本開(kāi)啟嚴(yán)格模式為函數(shù)開(kāi)啟嚴(yán)格模式兩種情況

1.1.2、為腳本開(kāi)啟嚴(yán)格模式

  • 為整個(gè)腳本文件開(kāi)啟嚴(yán)格模式,需要在所有語(yǔ)句之前放一個(gè)特定語(yǔ)句

  • "use strict"'use strict'

<script>
    'user strict';
	console.log("這是嚴(yán)格模式。");</script>

因?yàn)?code>"use strict"加了引號(hào),所以老版本的瀏覽器會(huì)把它當(dāng)作一行普通字符串而忽略。

有的 script 基本是嚴(yán)格模式,有的 script 腳本是正常模式,這樣不利于文件合并,所以可以將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。這樣獨(dú)立創(chuàng)建一個(gè)作用域而不影響其他 script 腳本文件。

<script>
	(function (){
    	'use strict';
    	 var num = 10;
    	 function fn() {}
	})();   </script>

1.1.2、為函數(shù)開(kāi)啟嚴(yán)格模式

  • 若要給某個(gè)函數(shù)開(kāi)啟嚴(yán)格模式,需要把"use strict"'use strict'聲明放在函數(shù)體所有語(yǔ)句之前

<body>
    <!-- 為整個(gè)腳本(script標(biāo)簽)開(kāi)啟嚴(yán)格模式 -->
    <script>
        'use strict';
        //   下面的js 代碼就會(huì)按照嚴(yán)格模式執(zhí)行代碼
    </script>
    <script>
        (function() {
            'use strict';
        })();
    </script>
    <!-- 為某個(gè)函數(shù)開(kāi)啟嚴(yán)格模式 -->
    <script>
        // 此時(shí)只是給fn函數(shù)開(kāi)啟嚴(yán)格模式
        function fn() {
            'use strict';
            // 下面的代碼按照嚴(yán)格模式執(zhí)行
        }

        function fun() {
            // 里面的還是按照普通模式執(zhí)行
        }
    </script></body>
  • "use strict" 放在函數(shù)體的第一行,則整個(gè)函數(shù)以 "嚴(yán)格模式"運(yùn)行。

2、嚴(yán)格模式中的變化

  • 嚴(yán)格模式對(duì)JavaScript的語(yǔ)法和行為,都做了一些改變

2.1、變量規(guī)定

  • 在正常模式中,如果一個(gè)變量沒(méi)有聲明就賦值,默認(rèn)是全局變量

  • 嚴(yán)格模式禁止這種用法,變量都必須先用var 命令聲明,然后再使用

  • 嚴(yán)禁刪除已經(jīng)聲明變量,例如,``delete x` 語(yǔ)法是錯(cuò)誤的

<body>
    <script>
        'use strict';
        // 1. 我們的變量名必須先聲明再使用
        // num = 10;
        // console.log(num);
        var num = 10;
        console.log(num);
        // 2.我們不能隨意刪除已經(jīng)聲明好的變量
        // delete num;
    </script></body>

2.2、嚴(yán)格模式下this指向問(wèn)題

  1. 以前在全局作用域函數(shù)中的this指向window對(duì)象

  2. 嚴(yán)格模式下全局作用域中函數(shù)中的thisundefined

  3. 以前構(gòu)造函數(shù)時(shí)不加 new 也可以調(diào)用,當(dāng)普通函數(shù),this指向全局對(duì)象

  4. 嚴(yán)格模式下,如果構(gòu)造函數(shù)不加 new 調(diào)用,this指向的是 undefined ,如果給它賦值,會(huì)報(bào)錯(cuò)

  5. new 實(shí)例化的構(gòu)造函數(shù)指向創(chuàng)建的對(duì)象實(shí)例

  6. 定時(shí)器this 還是指向window

  7. 事件、對(duì)象還是指向調(diào)用者

<body>
    <script>
        'use strict';
		//3. 嚴(yán)格模式下全局作用域中函數(shù)中的 this 是 undefined。
        function fn() {
            console.log(this); // undefined。

        }
        fn();
        //4. 嚴(yán)格模式下,如果 構(gòu)造函數(shù)不加new調(diào)用, this 指向的是undefined 如果給他賦值則 會(huì)報(bào)錯(cuò).
        function Star() {
            this.sex = '男';
        }
        // Star();
        var ldh = new Star();
        console.log(ldh.sex);
        //5. 定時(shí)器 this 還是指向 window 
        setTimeout(function() {
            console.log(this);

        }, 2000);
        
    </script></body>

2.3、函數(shù)變化

  1. 函數(shù)不能有重名的參數(shù)

  2. 函數(shù)必須聲明在頂層,新版本的JavaScript會(huì)引入“塊級(jí)作用域”(ES6中已引入)。為了與新版本接軌,不允許在非函數(shù)的代碼塊內(nèi)聲明函數(shù)

<body>
    <script>
        'use strict';
        // 6. 嚴(yán)格模式下函數(shù)里面的參數(shù)不允許有重名
        function fn(a, a) {
           console.log(a + a);

        };
        // fn(1, 2);
        function fn() {}
    </script></body>

3、高階函數(shù)

  • 高階函數(shù)是對(duì)其他函數(shù)進(jìn)行操作的函數(shù),它接收函數(shù)作為參數(shù)將函數(shù)作為返回值輸出

接收函數(shù)作為參數(shù)

<body>
    <p></p>
    <script>
        // 高階函數(shù)- 函數(shù)可以作為參數(shù)傳遞
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function() {
            console.log('我是最后調(diào)用的');

        });

    </script></body>

將函數(shù)作為返回值

<script>
    function fn(){
        return function() {}
    }</script>
  • 此時(shí) fn 就是一個(gè)高階函數(shù)

  • 函數(shù)也是一種數(shù)據(jù)類(lèi)型,同樣可以作為參數(shù),傳遞給另外一個(gè)參數(shù)使用。最典型的就是作為回調(diào)函數(shù)

  • 同理函數(shù)也可以作為返回值傳遞回來(lái)

4、閉包

4.1、變量作用域

變量根據(jù)作用域的不同分為兩種:全局變量和局部變量

  1. 函數(shù)內(nèi)部可以使用全局變量

  2. 函數(shù)外部不可以使用局部變量

  3. 當(dāng)函數(shù)執(zhí)行完畢,本作用域內(nèi)的局部變量會(huì)銷(xiāo)毀。

4.2、什么是閉包

閉包指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)

簡(jiǎn)單理解:一個(gè)作用域可以訪問(wèn)另外一個(gè)函數(shù)內(nèi)部的局部變量

<body>
    <script>
        // 閉包(closure)指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)。
        // 閉包: 我們fn2 這個(gè)函數(shù)作用域 訪問(wèn)了另外一個(gè)函數(shù) fn1 里面的局部變量 num
        function fn1() {		// fn1就是閉包函數(shù)
            var num = 10;
            function fn2() {
                console.log(num); 	//10
            }
            fn2();
        }
        fn1();
    </script></body>

4.3、在chrome中調(diào)試閉包

  1. 打開(kāi)瀏覽器,按 F12 鍵啟動(dòng) chrome 調(diào)試工具。

  2. 設(shè)置斷點(diǎn)。

  3. 找到 Scope 選項(xiàng)(Scope 作用域的意思)。

  4. 當(dāng)我們重新刷新頁(yè)面,會(huì)進(jìn)入斷點(diǎn)調(diào)試,Scope 里面會(huì)有兩個(gè)參數(shù)(global 全局作用域、local 局部作用域)。

  5. 當(dāng)執(zhí)行到 fn2() 時(shí),Scope 里面會(huì)多一個(gè) Closure 參數(shù) ,這就表明產(chǎn)生了閉包。

JavaScript的嚴(yán)格模式怎么開(kāi)啟

4.4、閉包的作用

  • 延伸變量的作用范圍

<body>
    <script>
        // 閉包(closure)指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)。
        // 一個(gè)作用域可以訪問(wèn)另外一個(gè)函數(shù)的局部變量 
        // 我們fn 外面的作用域可以訪問(wèn)fn 內(nèi)部的局部變量
        // 閉包的主要作用: 延伸了變量的作用范圍
        function fn() {
            var num = 10;
            return function() {
                console.log(num);
            }
        }
        var f = fn();
        f();
    </script></body>

4.5、閉包練習(xí)

4.5.1、點(diǎn)擊li輸出索引號(hào)

<body>
    <ul class="nav">
        <li>榴蓮</li>
        <li>臭豆腐</li>
        <li>鯡魚(yú)罐頭</li>
        <li>大豬蹄子</li>
    </ul>
    <script>
        // 閉包應(yīng)用-點(diǎn)擊li輸出當(dāng)前l(fā)i的索引號(hào)
        // 1. 我們可以利用動(dòng)態(tài)添加屬性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                // console.log(i);
                console.log(this.index);

            }
        }
        // 2. 利用閉包的方式得到當(dāng)前小li 的索引號(hào)
        for (var i = 0; i < lis.length; i++) {
            // 利用for循環(huán)創(chuàng)建了4個(gè)立即執(zhí)行函數(shù)
            // 立即執(zhí)行函數(shù)也成為小閉包因?yàn)榱⒓磮?zhí)行函數(shù)里面的任何一個(gè)函數(shù)都可以使用它的i這變量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i);
        }
    </script></body>

JavaScript的嚴(yán)格模式怎么開(kāi)啟

4.5.2、定時(shí)器中的閉包

<body>
    <ul class="nav">
        <li>榴蓮</li>
        <li>臭豆腐</li>
        <li>鯡魚(yú)罐頭</li>
        <li>大豬蹄子</li>
    </ul>
    <script>
        // 閉包應(yīng)用-3秒鐘之后,打印所有l(wèi)i元素的內(nèi)容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }
    </script></body>

JavaScript的嚴(yán)格模式怎么開(kāi)啟

5、遞歸

如果一個(gè)函數(shù)在內(nèi)部可以調(diào)用其本身,那么這個(gè)函數(shù)就是遞歸函數(shù)

簡(jiǎn)單理解: 函數(shù)內(nèi)部自己調(diào)用自己,這個(gè)函數(shù)就是遞歸函數(shù)

由于遞歸很容易發(fā)生"棧溢出"錯(cuò)誤,所以必須要加退出條件 return

<body>
    <script>
        // 遞歸函數(shù) : 函數(shù)內(nèi)部自己調(diào)用自己, 這個(gè)函數(shù)就是遞歸函數(shù)
        var num = 1;

        function fn() {
            console.log('我要打印6句話');

            if (num == 6) {
                return; // 遞歸里面必須加退出條件
            }
            num++;
            fn();
        }
        fn();
    </script></body>

6、淺拷貝和深拷貝

  1. 淺拷貝只是拷貝一層,更深層次對(duì)象級(jí)別的只拷貝引用

  2. 深拷貝拷貝多層,每一級(jí)別的數(shù)據(jù)都會(huì)拷貝

  3. Object.assign(target,....sources) ES6新增方法可以淺拷貝

6.1、淺拷貝

// 淺拷貝只是拷貝一層,更深層次對(duì)象級(jí)別的只拷貝引用var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }};var o = {}for(var k in obj){
    // k是屬性名,obj[k]是屬性值
    o[k] = obj.[k];}console.log(o);// 淺拷貝語(yǔ)法糖Object.assign(o,obj);

6.2、深拷貝

// 深拷貝拷貝多層,每一級(jí)別的數(shù)據(jù)都會(huì)拷貝var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    }
    color: ['pink','red']};var o = {};// 封裝函數(shù)function deepCopy(newobj,oldobj){
    for(var k in oldobj){
        // 判斷屬性值屬于簡(jiǎn)單數(shù)據(jù)類(lèi)型還是復(fù)雜數(shù)據(jù)類(lèi)型
        // 1.獲取屬性值   oldobj[k]
        var item = obldobj[k];
        // 2.判斷這個(gè)值是否是數(shù)組
        if(item instanceof Array){
            newobj[k] = [];
            deepCopy(newobj[k],item)
        }else if (item instanceof Object){
              // 3.判斷這個(gè)值是否是對(duì)象
            newobj[k] = {};
            deepCopy(newobj[k],item)
        }else {
            // 4.屬于簡(jiǎn)單數(shù)據(jù)類(lèi)型
            newobj[k] = item;
            
        } 
    }}deepCopy(o,obj);

7、 正則表達(dá)式

正則表達(dá)式是用于匹配字符串中字符組合的模式。在JavaScript中,正則表達(dá)式也是對(duì)象。

正則表通常被用來(lái)檢索、替換那些符合某個(gè)模式(規(guī)則)的文本,例如驗(yàn)證表單:用戶(hù)名表單只能輸入英文字母、數(shù)字或者下劃線, 昵稱(chēng)輸入框中可以輸入中文(匹配)。此外,正則表達(dá)式還常用于過(guò)濾掉頁(yè)面內(nèi)容中的一些敏感詞(替換),或從字符串中獲取我們想要的特定部分(提取)等 。

7.1、特點(diǎn)

  • 實(shí)際開(kāi)發(fā),一般都是直接復(fù)制寫(xiě)好的正則表達(dá)式

  • 但是要求會(huì)使用正則表達(dá)式并且根據(jù)自身實(shí)際情況修改正則表達(dá)式

7.2、創(chuàng)建正則表達(dá)式

在JavaScript中,可以通過(guò)兩種方式創(chuàng)建正則表達(dá)式

  1. 通過(guò)調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建

  2. 通過(guò)字面量創(chuàng)建

7.2.1、通過(guò)調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建

通過(guò)調(diào)用 RegExp 對(duì)象的構(gòu)造函數(shù)創(chuàng)建

var 變量名 = new RegExp(/表達(dá)式/);

7.2.2、通過(guò)字面量創(chuàng)建

通過(guò)字面量創(chuàng)建

var 變量名 = /表達(dá)式/;

注釋中間放表達(dá)式就是正則字面量

7.2.3、測(cè)試正則表達(dá)式 test

  • test()正則對(duì)象方法,用于檢測(cè)字符串是否符合該規(guī)則,該對(duì)象會(huì)返回truefalse,其參數(shù)是測(cè)試字符串

regexObj.test(str)
  • regexObj 寫(xiě)的是正則表達(dá)式

  • str 我們要測(cè)試的文本

  • 就是檢測(cè)str文本是否符合我們寫(xiě)的正則表達(dá)式規(guī)范

示例

<body>
    <script>
        // 正則表達(dá)式在js中的使用

        // 1. 利用 RegExp對(duì)象來(lái)創(chuàng)建 正則表達(dá)式
        var regexp = new RegExp(/123/);
        console.log(regexp);

        // 2. 利用字面量創(chuàng)建 正則表達(dá)式
        var rg = /123/;
        // 3.test 方法用來(lái)檢測(cè)字符串是否符合正則表達(dá)式要求的規(guī)范
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script></body>

7.3、正則表達(dá)式中的特殊在字符

7.3.1、邊界符

正則表達(dá)式中的邊界符(位置符)用來(lái)提示字符所處的位置,主要有兩個(gè)字符

邊界符說(shuō)明
^表示匹配行首的文本(以誰(shuí)開(kāi)始)
$表示匹配行尾的文本(以誰(shuí)結(jié)束)

如果^ 和 $ 在一起,表示必須是精確匹配

// 邊界符 ^ $
var rg = /abc/;   //正則表達(dá)式里面不需要加引號(hào),不管是數(shù)字型還是字符串型
// /abc/只要包含有abc這個(gè)字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));

var reg = /^abc/;
console.log(reg.test('abc'));   //true
console.log(reg.test('abcd'));	// true
console.log(reg.test('aabcd')); // false

var reg1 = /^abc$/
// 以abc開(kāi)頭,以abc結(jié)尾,必須是abc

7.3.2、字符類(lèi)

  • 字符類(lèi)表示有一系列字符可供選擇,只要匹配其中一個(gè)就可以了

  • 所有可供選擇的字符都放在方括號(hào)內(nèi)

①[] 方括號(hào)
/[abc]/.test('andy');     // true

后面的字符串只要包含 abc 中任意一個(gè)字符,都返回true

②[-]方括號(hào)內(nèi)部 范圍符
/^[a-z]$/.test()

方括號(hào)內(nèi)部加上-表示范圍,這里表示a - z26個(gè)英文字母都可以

③[^] 方括號(hào)內(nèi)部 取反符 ^
/[^abc]/.test('andy')   // false

方括號(hào)內(nèi)部加上^表示取反,只要包含方括號(hào)內(nèi)的字符,都返回 false

注意和邊界符 ^ 區(qū)別,邊界符寫(xiě)到方括號(hào)外面

④字符組合
/[a-z1-9]/.test('andy')    // true

方括號(hào)內(nèi)部可以使用字符組合,這里表示包含a 到 z的26個(gè)英文字母和1到9的數(shù)字都可以

<body>
    <script>
        //var rg = /abc/;  只要包含abc就可以 
        // 字符類(lèi): [] 表示有一系列字符可供選擇,只要匹配其中一個(gè)就可以了
        var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回為true
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));
        console.log(rg.test('color'));
        console.log(rg.test('red'));
        var rg1 = /^[abc]$/; // 三選一 只有是a 或者是 b  或者是c 這三個(gè)字母才返回 true
        console.log(rg1.test('aa'));
        console.log(rg1.test('a'));
        console.log(rg1.test('b'));
        console.log(rg1.test('c'));
        console.log(rg1.test('abc'));
        console.log('------------------');

        var reg = /^[a-z]$/; // 26個(gè)英文字母任何一個(gè)字母返回 true  - 表示的是a 到z 的范圍  
        console.log(reg.test('a'));
        console.log(reg.test('z'));
        console.log(reg.test(1));
        console.log(reg.test('A'));
        // 字符組合
        var reg1 = /^[a-zA-Z0-9_-]$/; // 26個(gè)英文字母(大寫(xiě)和小寫(xiě)都可以)任何一個(gè)字母返回 true  
        console.log(reg1.test('a'));
        console.log(reg1.test('B'));
        console.log(reg1.test(8));
        console.log(reg1.test('-'));
        console.log(reg1.test('_'));
        console.log(reg1.test('!'));
        console.log('----------------');
        // 如果中括號(hào)里面有^ 表示取反的意思 千萬(wàn)和 我們邊界符 ^ 別混淆
        var reg2 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg2.test('a'));
        console.log(reg2.test('B'));
        console.log(reg2.test(8));
        console.log(reg2.test('-'));
        console.log(reg2.test('_'));
        console.log(reg2.test('!'));
    </script></body>

7.3.3、量詞符

量詞符用來(lái)設(shè)定某個(gè)模式出現(xiàn)的次數(shù)

量詞說(shuō)明
*重復(fù)零次或更多次
+重復(fù)一次或更多次
?重復(fù)零次或一次
{n}重復(fù)n次
{n,}重復(fù)n次或更多次
{n,m}重復(fù)n到m次
<body>
    <script>
        // 量詞符: 用來(lái)設(shè)定某個(gè)模式出現(xiàn)的次數(shù)
        // 簡(jiǎn)單理解: 就是讓下面的a這個(gè)字符重復(fù)多少次
        // var reg = /^a$/;


        //  * 相當(dāng)于 >= 0 可以出現(xiàn)0次或者很多次 
        // var reg = /^a*$/;
        // console.log(reg.test(''));
        // console.log(reg.test('a'));
        // console.log(reg.test('aaaa'));



        //  + 相當(dāng)于 >= 1 可以出現(xiàn)1次或者很多次
        // var reg = /^a+$/;
        // console.log(reg.test('')); // false
        // console.log(reg.test('a')); // true
        // console.log(reg.test('aaaa')); // true

        //  ?  相當(dāng)于 1 || 0
        // var reg = /^a?$/;
        // console.log(reg.test('')); // true
        // console.log(reg.test('a')); // true
        // console.log(reg.test('aaaa')); // false

        //  {3 } 就是重復(fù)3次
        // var reg = /^a{3}$/;
        // console.log(reg.test('')); // false
        // console.log(reg.test('a')); // false
        // console.log(reg.test('aaaa')); // false
        // console.log(reg.test('aaa')); // true
        //  {3, }  大于等于3
        var reg = /^a{3,}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aaaa')); // true
        console.log(reg.test('aaa')); // true
        //  {3,16}  大于等于3 并且 小于等于16
        var reg = /^a{3,6}$/;
        console.log(reg.test('')); // false
        console.log(reg.test('a')); // false
        console.log(reg.test('aaaa')); // true
        console.log(reg.test('aaa')); // true
        console.log(reg.test('aaaaaaa')); // false
    </script></body>

7.3.4、用戶(hù)名驗(yàn)證

功能需求:

  1. 如果用戶(hù)名輸入合法, 則后面提示信息為 : 用戶(hù)名合法,并且顏色為綠色

  2. 如果用戶(hù)名輸入不合法, 則后面提示信息為: 用戶(hù)名不符合規(guī)范, 并且顏色為綠色

分析:

  1. 用戶(hù)名只能為英文字母,數(shù)字,下劃線或者短橫線組成, 并且用戶(hù)名長(zhǎng)度為 6~16位.

  2. 首先準(zhǔn)備好這種正則表達(dá)式模式 /$[a-zA-Z0-9-_]{6,16}^/

  3. 當(dāng)表單失去焦點(diǎn)就開(kāi)始驗(yàn)證.

  4. 如果符合正則規(guī)范, 則讓后面的span標(biāo)簽添加 right 類(lèi).

  5. 如果不符合正則規(guī)范, 則讓后面的span標(biāo)簽添加 wrong 類(lèi).

<body>
    <input type="text" class="uname"> <span>請(qǐng)輸入用戶(hù)名</span>
    <script>
        //  量詞是設(shè)定某個(gè)模式出現(xiàn)的次數(shù)
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 這個(gè)模式用戶(hù)只能輸入英文字母 數(shù)字 下劃線 短橫線但是有邊界符和[] 這就限定了只能多選1
        // {6,16}  中間不要有空格
        // console.log(reg.test('a'));
        // console.log(reg.test('8'));
        // console.log(reg.test('18'));
        // console.log(reg.test('aa'));
        // console.log('-------------');
        // console.log(reg.test('andy-red'));
        // console.log(reg.test('andy_red'));
        // console.log(reg.test('andy007'));
        // console.log(reg.test('andy!007'));
        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正確的');
                span.className = 'right';
                span.innerHTML = '用戶(hù)名格式輸入正確';
            } else {
                console.log('錯(cuò)誤的');
                span.className = 'wrong';
                span.innerHTML = '用戶(hù)名格式輸入不正確';
            }
        }
    </script></body>

7.4、括號(hào)總結(jié)

  1. 大括號(hào) 量詞符 里面面表示重復(fù)次數(shù)

  2. 中括號(hào) 字符集合 匹配方括號(hào)中的任意字符

  3. 小括號(hào) 表示優(yōu)先級(jí)

// 中括號(hào) 字符集合 匹配方括號(hào)中的任意字符
var reg = /^[abc]$/;
// a || b || c
// 大括號(hào) 量詞符 里面表示重復(fù)次數(shù)
var reg = /^abc{3}$/;   // 它只是讓c 重復(fù)3次 abccc
// 小括號(hào) 表示優(yōu)先級(jí)
var reg = /^(abc){3}$/;  //它是讓 abc 重復(fù)3次

7.5、預(yù)定義類(lèi)

預(yù)定義類(lèi)指的是某些常見(jiàn)模式的簡(jiǎn)寫(xiě)寫(xiě)法

預(yù)定類(lèi)說(shuō)明
\d匹配0-9之間的任一數(shù)字,相當(dāng)于[0-9]
\D匹配所有0-9以外的字符,相當(dāng)于[ ^ 0-9]
\w匹配任意的字母、數(shù)字和下劃線,相當(dāng)于[A-Za-z0-9_ ]
\W除所有字母、數(shù)字、和下劃線以外的字符,相當(dāng)于[ ^A-Za-z0-9_ ]
\s匹配空格(包括換行符,制表符,空格符等),相當(dāng)于[\t\t\n\v\f]
\S匹配非空格的字符,相當(dāng)于[ ^ \t\r\n\v\f]

7.5.1、表單驗(yàn)證

分析:

1.手機(jī)號(hào)碼: /^1[3|4|5|7|8][0-9]{9}$/

2.QQ: [1-9][0-9]{4,} (騰訊QQ號(hào)從10000開(kāi)始)

3.昵稱(chēng)是中文: ^[\u4e00-\u9fa5]{2,8}$

<body>
    <script>
        // 座機(jī)號(hào)碼驗(yàn)證:  全國(guó)座機(jī)號(hào)碼  兩種格式:   010-12345678  或者  0530-1234567
        // 正則里面的或者 符號(hào)  |  
        // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
        var reg = /^\d{3,4}-\d{7,8}$/;
    </script></body>

7.6、正則表達(dá)式中的替換

7.6.1、replace 替換

replace()方法可以實(shí)現(xiàn)替換字符串操作,用來(lái)替換的參數(shù)可以是一個(gè)字符串或是一個(gè)正則表達(dá)式

stringObject.replace(regexp/substr,replacement)
  1. 第一個(gè)參數(shù): 被替換的字符串或者正則表達(dá)式

  2. 第二個(gè)參數(shù):替換為的字符串

  3. 返回值是一個(gè)替換完畢的新字符串

// 替換 replacevar str = 'andy和red';var newStr = str.replace('andy','baby');var newStr = str.replace(/andy/,'baby');

7.6.2、正則表達(dá)式參數(shù)

/表達(dá)式/[switch]

switch按照什么樣的模式來(lái)匹配,有三種

  • g: 全局匹配

  • i:忽略大小寫(xiě)

  • gi: 全局匹配 + 忽略大小寫(xiě)

以上就是關(guān)于“JavaScript的嚴(yán)格模式怎么開(kāi)啟”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI