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

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

模版字元串 ``反引號表示 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("

您的分享是我們最大的動力!

更多相關文章
  • //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 ...
  • 使用背景: 項目中使用了jquery-weui的左滑刪除組件,但在蘋果上使用會有左滑點擊穿透的現象,只能改源碼了。 在github上找,發現是gulp構建的,但版本很低,對於node版本大概要4.5.0才行,本機node版本過高用不了,所以把 node卸載了裝nvm來管理。 使用步驟: 1. 卸載本 ...
  • HTML + CSS 就是當代網頁的基石 。全世界的網站,無論其伺服器端的語言是什麼,前端都使用了 HTML + CSS。 隨著互聯網行業的快速發展,前端這一職位也越來越火熱,前端工程師的高薪資,也讓越來越多的人想要進入這個行業。 那麼,零基礎小白如何才能成為一名前端工程師呢? 首先大家要瞭解的是, ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue 同步 $n ...
  • vuex控制台告警There are multiple modules with names that only differ in casing ...
  • 如今前端開發的任職要求越來越高了,不僅要掌握 javascript,熟悉vue、react等各種框架,甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ,靠扒代碼套用代碼工具就能找到一份相對不錯的工作,看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
一周排行
  • 前幾天發佈了 "抄抄《CSS 故障藝術》的動畫" 這篇文章,在這篇文章里介紹瞭如何使用Win2D繪製文字然後配合BlendEffect製作故障藝術的動畫。本來打算就這樣收手不玩這個動畫了,但後來又發現性能不符合理想。明明只是做做Resize動畫和用BlendEffect混合,為什麼性能會這麼差呢? ...
  • 控制條控制項: progressBar 不能按照你程式的進程自動變化,需認為計算,調整變化量 private void progressBar1_Click(object sender, EventArgs e) { this.progressBar1.Maximum = 100;//設置進度條最大長 ...
  • 首先創建一個asp.net core web應用程式 第二步 目前官方預置了7種模板項目供我們選擇。從中我們可以看出,既有我們熟悉的MVC、WebAPI,又新添加了Razor Page,以及結合比較流行的Angular、React前端框架的模板項目。 空項目模板 Program.cs using S ...
  • 對閉包的理解 1.對於成員變數和局部變數:成員變數就是方法外部,類的內部定義的變數;局部變數就是方法或語句塊內部定義的變數。局部變數必須初始化。 形式參數是局部變數,局部變數的數據存在於棧記憶體中。棧記憶體中的局部變數隨著方法的消失而消失。成員變數存儲在堆中的對象裡面,由垃圾回收器負責回收。 成員變數它 ...
  • Xamarin.Forms讀取並展示Android和iOS通訊錄 TerminalMACS客戶端 本文同步更新地址: https://dotnet9.com/11520.html https://terminalmacs.com/861.html 閱讀導航: 一、功能說明 二、代碼實現 三、源碼獲取 ...
  • 做下對文件複製操作相關的筆記: /// <summary> /// 文件幫助類 /// </summary> public class FileHelper { /// <summary> /// 複製一個目錄下所有文件到一個新目錄下 /// </summary> /// <param name=" ...
  • 前言 有一個東西叫做鴨子類型,所謂鴨子類型就是,只要一個東西表現得像鴨子那麼就能推出這玩意就是鴨子。 C 裡面其實也暗藏了很多類似鴨子類型的東西,但是很多開發者並不知道,因此也就沒法好好利用這些東西,那麼今天我細數一下這些藏在編譯器中的細節。 不是只有 和 才能 在 C 中編寫非同步代碼的時候,我們經 ...
  • [toc] 1.應用背景 底端設備有大量網路報文(位元組數組):心跳報文,數據採集報文,告警報文上報。需要有對應的報文結構去解析這些位元組流數據。 2.結構體解析 由此,我第一點就想到了用結構體去解析。原因有以下兩點: 2.1.結構體存在棧中 類屬於引用類型,存在堆中;結構體屬於值類型,存在棧中,在一個 ...
  • 《深入淺出 C#》 (第3版) [作者] (美) Andrew Stellman (美) Jennifer Greene[譯者] (中) 徐陽 丁小峰 等譯[出版] 中國電力出版社[版次] 2016年08月 第1版[印次] 2018年04月 第4次 印刷[定價] 148.00元 【引子】 要學習編程 ...
  • 記錄使用對象初始值設定項初始化對象。 using System; using System.Collections.Generic; namespace ConsoleApp2 { class Program { static void Main(string[] args) { // 使用構造函數 ...
x