ES6 字元串擴展+正則擴展+數值擴展

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/25/12566728.html
-Advertisement-
Play Games

模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...


模版字元串

``反引號表示

    var cyy={
        name:"cyy",
        age:18,
        say:function(){
            console.log('我叫'+this.name+',我今年'+this.age+'歲');
        },
        say2:function(){
            console.log(`我叫`+this.name+`,我今年`+this.age+`歲`);//模板字元串可以替代單引號或者雙引號
        },
        say3:function(){
            console.log(`我叫${ this.name },我今年${ this.age }歲`);//可以用${}替代字元串拼接
        },
        say4:function(){
            console.log(`我叫${ `Miss ${this.name}` },我今年${ this.age }歲`);//${}可以嵌套
        },
        say5:function(){
            console.log(`我叫${ `Miss ${this.name.toUpperCase()}` },我今年${ this.age }歲`);//${}可以使用字元串方法
        }
    }
    cyy.say();
    cyy.say2();
    cyy.say3();
    cyy.say4();
    cyy.say5();

 

 

普通方式渲染數據

//模擬ajax獲取到數據
function getList(){
    //ajax
    
    return {
        status:true,
        msg:"獲取成功",
        data:[{
            id:1,
            title:"title1",
            date:"date1"
        },{
            id:2,
            title:"title2",
            date:"date2"
        },{
            id:3,
            title:"title3",
            date:"date3"
        }]
    };
}

//結構賦值獲取數據（給data取別名listData)
const {data:listData,msg,status}=getList();

if(status){
    let arr=[];

    //迴圈獲取數據
    listData.forEach(function({title,date}){
        //普通方式渲染數據
        arr.push('<li>\
                    <span>'+title+'</span>\
                    <span>'+date+'</span>\
                </li>');
    })

    let ul=document.createElement("ul");
    //join數組轉字元串
    //arr.join('') 則字元串直接拼接
    //arr.join() 字元串會用逗號分隔 
    ul.innerHTML=arr.join('');
    document.body.appendChild(ul);

}else{
    alert(msg);
}

 

使用模板字元串渲染數據（可以直接換行，不用轉義）

//模擬ajax獲取到數據
function getList(){
    //ajax
    
    return {
        status:true,
        msg:"獲取成功",
        data:[{
            id:1,
            title:"title1",
            date:"date1"
        },{
            id:2,
            title:"title2",
            date:"date2"
        },{
            id:3,
            title:"title3",
            date:"date3"
        }]
    };
}

//結構賦值獲取數據（給data取別名listData)
const {data:listData,msg,status}=getList();

if(status){
    let arr=[];

    //迴圈獲取數據
    listData.forEach(function({title,date}){
        //模板字元串渲染數據
        arr.push(`<li>
                    <span>${ title }</span>
                    <span>${ date }</span>
                </li>`);
    })

    let ul=document.createElement("ul");
    //join數組轉字元串
    //arr.join('') 則字元串直接拼接
    //arr.join() 字元串會用逗號分隔 
    ul.innerHTML=arr.join('');
    document.body.appendChild(ul);

}else{
    alert(msg);
}

 

 

還可以進一步對模板字元串進行處理

//模擬ajax獲取到數據
function getList(){
    //ajax
    
    return {
        status:true,
        msg:"獲取成功",
        data:[{
            id:1,
            title:"title1",
            date:"date1"
        },{
            id:2,
            title:"title2",
            date:"date2"
        },{
            id:3,
            title:"title3",
            date:"date3"
        }]
    };
}

//結構賦值獲取數據（給data取別名listData)
const {data:listData,msg,status}=getList();

function foo(str){
    return str.replace("date","mydate");
}

if(status){
    let arr=[];

    //迴圈獲取數據
    listData.forEach(function({title,date}){
        //模板字元串渲染數據
        arr.push(`<li>
                    <span>${ `課程名 ${ title }` }</span>
                    <span>${ foo(date) }</span>
                </li>`);
    })

    let ul=document.createElement("ul");
    //join數組轉字元串
    //arr.join('') 則字元串直接拼接
    //arr.join() 字元串會用逗號分隔 
    ul.innerHTML=arr.join('');
    document.body.appendChild(ul);

}else{
    alert(msg);
}

 

 

字元串部分新的方法

padStart padEnd 補全字元串長度

//padStart 從前面補全
//第一個參數是補全後的總長度，第二個參數是用來補全的字元串
let str="cyy";
let str2=str.padStart(8,"nice ");
let str3=str.padStart(13,"nice ");

 

 

//padEnd 從後面補全
//第一個參數是補全後的總長度，第二個參數是用來補全的字元串
let str="cyy";
let str2=str.padEnd(8," nice");
let str3=str.padEnd(13," nice");

 

 

repeat 字元串的重覆

{
    let str="c";
    console.log(str.repeat(10));//重覆10遍

    let str2="cyy ";
    console.log(str2.repeat(4));//重覆4遍
}

 

 需要註意的是，repeat如果傳入小於-1的負數，如-3，會報錯

如果傳入大於-1的負數，如-0.33，會轉為0

如果傳入小數，如2.55，會取整（向下取整，轉為2）

 

自己封裝函數來實現類似repeat的功能

{

    console.log(myRepeat("s",10));//重覆10遍

    function myRepeat(str,num){
        // 定義數組，元素個數為num+1
        // 然後數組轉字元串，用str作為分隔符
        return new Array(num+1).join(str);
    }
}

 

 

startsWith  endsWidth 判斷字元串是否以什麼開始，以什麼結束

{
    let str="i am cyy";
    console.log(str.startsWith("i"));
    console.log(str.endsWith("yy"));
}

 

 

includes 判斷存在

indexOf也可以實現類似功能

{
    let str="i am cyy";
    if(str.indexOf("cyy") !== -1){
        console.log(`存在cyy`);
    }

    //~x=!(x+1)  -1會轉為0
    if(~str.indexOf("cyy")){
        console.log(`存在cyy`);
    }

    if(str.includes("cyy")){
        console.log(`存在cyy`);
    }
}

 

ES6之前的方式遍歷字元串

{
    let str="i am cyy";
    //原來的方式遍歷
    for(var i=0,len=str.length;i<len;i++){
        console.log(str[i]);
        //charAt 也可以通過下標返回字元
        console.log(str.charAt(i));
    }
    
}

 

 

字元串轉為數組，使用數組原型的slice

{
    let str="i am cyy";
    //字元串轉數組
    let str2=Array.prototype.slice.call(str);
    console.log(str2);

    let str3=str.split("");
    console.log(str3);

    //擴展運算符
    let str4=[...str];
    console.log(str4);

    //擴展運算符2
    let [...str5]=str;
    console.log(str5);

    //遍曆數組
    str5.forEach(function(w){
        console.log(w);
    })
    
}

 

 

for in 遍歷對象或者數組的屬性

for of  ES6新增，只能遍曆數組，不能遍歷對象

forEach 只遍曆數組，不能遍歷對象

for  遍曆數組常用

 

遍歷操作字元串（使用數組方式）

對字元串中的大寫字母進行加密

{
    //方法一
    const map={
        A:"100",
        B:"99",
        C:"98",
        D:"97",
        E:"96",
        F:"95",
        G:"94"
    };
    const words="ABCDEFG";
    
    let str="I AM CYY";
    let ostr=[...str];//字元串轉數組

    ostr.forEach(function(word,index){
        if(words.includes(word)){
            ostr[index]=map[word];
        }
    })
    console.log(ostr);
    console.log(ostr.join(""));//拼接回字元串
}

 

 

使用for of遍歷字元串

    //for of遍歷字元串
    let str="I AM CYY";
    for(let s of str){
        console.log(s);
    }

 

 

使用for of實現數據加密

{

    //for of實現字元加密
    const map={
        A:"100",
        B:"99",
        C:"98",
        D:"97",
        E:"96",
        F:"95",
        G:"94"
    };
    const words="ABCDEFG";
    
    let str="I AM CYY";
    let nstr="";

    for(let s of str){
        if(words.includes(s)){
            nstr+=map[s];
        }else{
            nstr+=s;
        }
    }

    console.log(nstr);
}

 

 

 

unicode表示法

{

    //unicode碼點  \u
    //一般只會識別0000-ffff
    //因為會識別四位，\u1f43是ὃ，後面跟上6
    let str="\u1f436";
    console.log(str);

    //ES6允許碼點帶上花括弧，這樣就會識別全部碼點，不會在四位截斷
    let str2="\u{1f436}";
    console.log(str2);
}

 

 

在控制台輸入測試的時候，記得帶上引號

 

 

codePointAt 獲取字元串中某個字元對應的碼點

{

    //unicode碼點  \u
    //一般只會識別0000-ffff
    //因為會識別四位，\u1f43是ὃ，後面跟上6
    let str="\u1f436";
    console.log(str);

    //ES6允許碼點帶上花括弧，這樣就會識別全部碼點，不會在四位截斷
    let str2="\u{1f436}";
    console.log(str2);

    console.log("
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ES6 對象擴展
    //ES5 對象 const getInfo=(id=1)=>{ //ajax... const name="cyy"; const age=18; return { name:name, age:age, say:function(){ console.log(this.name+this.age ...
  • 瀏覽器跨域問題分析
    瀏覽器的同源策略：協議相同、功能變數名稱相同、埠相同。所有瀏覽器廠商遵循這種策略。 非同源（跨域）共有三種行為受到限制： cookie、localstorage、和IndexDB無法獲取 DOM無法獲取 ATAX請求不能發送 這種同源性會有效的阻止CSRF（跨站請求）攻擊。 瀏覽器請求分為兩種：（CORS ...
  • node 版本管理工具--nvm
    使用背景: 項目中使用了jquery-weui的左滑刪除組件，但在蘋果上使用會有左滑點擊穿透的現象，只能改源碼了。 在github上找，發現是gulp構建的，但版本很低，對於node版本大概要4.5.0才行，本機node版本過高用不了，所以把 node卸載了裝nvm來管理。 使用步驟： 1. 卸載本 ...
  • 【從零入門 Web 前端】HTML5 + CSS 簡明教程
    HTML + CSS 就是當代網頁的基石 。全世界的網站，無論其伺服器端的語言是什麼，前端都使用了 HTML + CSS。 隨著互聯網行業的快速發展，前端這一職位也越來越火熱，前端工程師的高薪資，也讓越來越多的人想要進入這個行業。 那麼，零基礎小白如何才能成為一名前端工程師呢？ 首先大家要瞭解的是， ...
  • vue 同步 $nextTick setTimeout 執行的順序
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue 同步 $n ...
  • vue使用vuex後報警：There are multiple modules with names that only differ in casing.
    vuex控制台告警There are multiple modules with names that only differ in casing ...
  • 2020年需要學習的8個前端關鍵技能
    如今前端開發的任職要求越來越高了，不僅要掌握 javascript，熟悉vue、react等各種框架，甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ，靠扒代碼套用代碼工具就能找到一份相對不錯的工作，看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • svg圖標
    對於web中的icons的各種實現的利弊，請參考：Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例，說下svg圖標簡單的使用： 挑選圖標下載到本地，文件結構如下： 運行demo_index.html文件，裡面有很詳細的介紹： Unicode 引用 font-class 引用 Symbol 引用 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類