ES6 字符串扩展+正则扩展+数值扩展_JavaScript

模版字符串

``反引号表示

    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("

 

                    
                        您可能感兴趣的文章:
                        

                                
                                    CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
                                
                                
                                    微信小程序实现tab左右切换效果
                                
                                
                                    基于ionic的混合APP实战
                                
                                
                                    toggle一个div显示或隐藏且可扩展成自定义下拉框
                                
                                
                                    Unity Editor中打开场景获取GameObject
                                
                                
                                    js如何编写简单的ajax方法库
                                
                        
                    
                    
                        如您对本文有疑问或者有任何想说的，请
                        点击进行留言回复，万千网友为您解惑！

javascript实现图片轮换动作方法

图片轮换是一种相当复杂的技术，早些年基本用flash实现。这里有一个，教大家如何用flash实现它的。之所以用flash，是因为flash是基于帧的，这与图片轮... [阅读全文]
基于javascript的无缝滚动动画实现2

以更少的代码实现相同的效果应该是我们写程序的究极目标，当然可读性不能丢。在最后一个运行框，我已经做了这样的探索。不过换汤不换药，还是来来回回在scrolltop... [阅读全文]
浅谈javascript如何获取文件后缀名

在上传文件时，常常要对文件的类型即对文件的后缀名进行判断，用javascript可以很容易的做到这一点。用javascript解析一个带绝对路径的文件名并得到后... [阅读全文]
使用JavaScript和MQTT开发物联网应用示例解析

如果说java和c#哪个是最好的开发语言，无疑会挑起程序员之间的相互怒怼，那如果说javascript是动态性最好的语言，相信大家都不会有太大的争议。随着越来越... [阅读全文]
JavaScript代码模拟鼠标自动点击事件示例

利用javascript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后，javascript代码会自动去点击下一个按钮，一直点击到按钮5才会停止（... [阅读全文]
javascript解析json格式的数据方法详解

json （javascript object notation）是一种简单的数据格式，比xml更轻巧。它是 javascript 原生格式，这意味着在 ja... [阅读全文]
javascript前端和后台进行数据交互方法示例

在开发中遇到了在没有jquery的情况下需要与后台进行部分数据的交互，查找了部分资料使用javascript实现了操作，记录一下。//获取xmlhttprequ... [阅读全文]
使用纯前端JavaScript实现Excel导入导出方法过程详解

公司最近要为某国企做一个**统计和管理系统，具体要求包含excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果... [阅读全文]
微信小程序完美解决scroll-view高度自适应问题的方法

第一种情况，scroll-view占据整屏scroll-view { height: 100vh;}第二种情况，scroll-view自适应页面剩余高度xml文... [阅读全文]
js利用iframe实现选项卡效果

本文实例为大家分享了js利用iframe实现选项卡的具体代码，供大家参考，具体内容如下<!doctype html><html> <... [阅读全文]

网友评论


验证码：

ES6 字符串扩展+正则扩展+数值扩展

2020年03月26日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论