精华内容
下载资源
问答
  • ES6字符串新增方法

    2020-09-14 14:42:19
    ES6字符串新增方法 1. 用于从码点返回对应字符, (该方法不能识别大于0xFFFF的字符)String.fromCharCode()方法 ​ 例: (该方法用于识别大于0xFFFF的字符)String.fromCodePoint()方法 注释 : 两种方法可传多个...

    ES6字符串新增方法

    1. 用于从码点返回对应字符,

    • (该方法不能识别大于0xFFFF的字符)String.fromCharCode()方法

    ​ 例:在这里插入图片描述

    • (该方法用于识别大于0xFFFF的字符)String.fromCodePoint()方法

    在这里插入图片描述

    注释 : 两种方法可传多个参数 ,会以字符串形式输出

    2.返回字符串的十进制码点

    解析 : JavaScript内部,字符串以UTF-16的格式存储,每个字符固定为两个字节.对于需要4个字节存储的字符(Unicode码点大于0xFFFF的字符),JavaScript会认为他们有两个字符.
    • charCodeAt()方法只能分别返回前两个或者后两个字节的值

    在这里插入图片描述

    • ES6提供能够正确处理4个字节存储的字符,返回一个字符的码点。

      1.方法一
      在这里插入图片描述

    codePointAt()方法的参数,仍然是不正确的。比如,上面代码中,字符a在字符串s的正确位置序号应该是 1,但是必须向codePointAt()方法传入 2。
    解决这个问题的一个办法是使用for...of循环,因为它会正确识别 32 位的 UTF-16 字符。

    2.方法二(…)使用扩展运算符展开运算


    在这里插入图片描述

    • 用于测试一个字符是由2个字节还是4个字节组成

    在这里插入图片描述

    4.字符串实例方法

    • includes()

    ​ 返回布尔值,表示是否找到了参数字符串(首个参数为要找的字符串,第二个参数指范围从该位置到结尾)

    • startsWith()

    ​ 返回布尔值.表示参数字符串是否在原字符串头部(首个参数为要找的字符串,第二个参数指范围从该位置到结尾)

    • endsWith()

    ​ 返回布尔值,表示参数字符串是否在原字符串尾部(首个参数为要找的字符串,第二个参数指范围从0开始到该位置结束)

    • repeat()

      ​ 返回一个新字符串,表示将原字符串重复n次.(传参是小数会被取整)(0-1之间小数和0-负1之间小数都取0)

    在这里插入图片描述

    5.字符串不足几位补齐

    • ​ 头部补全部padStart
    'x'.padStart(5,'ab')    //'ababx'
    
    • 尾部补全padEnd()

    6. 消除空格 等不可见的空白符号

    • trimStart()别名trimLeft()消除字符串头部的空格,返回新字符串,原字符串不受影响
    • trimEnd()别名trimRight()消除字符串尾部的空格,返回新字符串,原字符串不受影响
    展开全文
  • ES6 字符串新增方法

    2019-06-18 08:59:34
    字符串是JavaScript六大原始数据类型之一,其它几个分别是:Boolean、Null、Undefined、Number、Symbol(es6新增方法)。 我们经常使用的操作无非是:读取字符串、转换字符串、清空字符串、拼接字符串、截取字符串...

    字符串:

    字符串是JavaScript六大原始数据类型之一,其它几个分别是:Boolean、Null、Undefined、Number、Symbol(es6新增方法)。

    我们经常使用的操作无非是:读取字符串、转换字符串、清空字符串、拼接字符串、截取字符串。

    字符串的子串识别方法:

         indexOf()(ES5方法):判断字符串a是否在包含在字符串b里,如果包含返回的是字符串a在字符串b里的索引,不包含返回-1;

     

         ES6新增方法:

    includes(str , index):在字符串中检测到指定文本,返回true,否则返回false;

                                               str----需要解锁的子字符串,index----开始匹配的索引位置。

    let a = "abcdef";
    if(a.includes("abc")){
        console.log("匹配成功")
    }
    //true

    startsWith(str , index):在字符串起始部分检测到该指定文本,返回true,否则返回false;

    let a = "abcde";
    if(a.startWith("abc")){
        console.log("在起始位置")
    }
    //true

    endsWith(str , index):在字符串结束部分检测到该指定文本,返回true,否则返回false;

    let a = "abcde";
    if(a.endsWith("cde")){
        console.log("在末尾位置")
    }
    //true

    repeat(number):接受一个数字类型的参数,返回一个重复N次的新字符串;

    let a = "1";
    console.log(a.repeat(5))
    //"11111"

    补充:

    split

     

     

    模板字符串:

    在ES5中经常会用到字符串拼接,稍微复杂点的场景一不小心就会拼错;ES6中对字符串进行了升级----反撇号;

    let str = `abc`;

    如果想在模板字符串中使用反撇号需要转义符:

    let str = `ab\`c`;
    console.log(str)//ab`c

    支持换行:

    let str = `<div>
                    <p>吕星辰</p>
                </div>`;
    console.log(str);

    在模板字符串中插入变量:

    let a = "edg";
    let b = `rng和${a}`;
    console.log(b)//rng和edg

     

    展开全文
  • es6字符串新增方法

    2020-05-27 14:06:52
    es5 String. fromChartCode(0x20BB7)从Unicode从码点返回对应字符串 es6 String. formCodePaint() …………

    es5 String. fromChartCode(0x20BB7)从Unicode从码点返回对应字符串

    es6 String. formCodePaint()
    …………
    String. row()返回斜杠前面加斜杠字符串
    ………
    codePointAt()
    ………
    normalize()合成符号
    ……
    includes()
    startsWith()
    endsWith()
    ………
    repeat()
    ………
    padStart()
    padEnd()
    ……
    trimStart()
    trimEnd()
    ……
    matchAll()

    展开全文
  • // 传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。 // includes():返回布尔值,表示是否找到了参数字符串。 // startsWith():返回布尔值,表示...
    // 实例方法:includes(), startsWith(), endsWith()
    // 传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
    // includes():返回布尔值,表示是否找到了参数字符串。
    // startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    // endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    let s = 'Hello world!';
    
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true
    // 这三个方法都支持第二个参数,表示开始搜索的位置。
    let s = 'Hello world!';
    
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false
    // 上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
    // 实例方法:repeat() § ⇧
    // repeat方法返回一个新字符串,表示将原字符串重复n次。
    
    'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"
    'na'.repeat(0) // ""
    // 参数如果是小数,会被取整。
    
    'na'.repeat(2.9) // "nana"
    // 如果repeat的参数是负数或者Infinity,会报错。
    
    'na'.repeat(Infinity)
    // RangeError
    'na'.repeat(-1)
    // RangeError
    // 但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0。
    
    'na'.repeat(-0.9) // ""
    // 参数NaN等同于 0。
    
    'na'.repeat(NaN) // ""
    // 如果repeat的参数是字符串,则会先转换成数字。
    
    'na'.repeat('na') // ""
    'na'.repeat('3') // "nanana"
    // 实例方法:trimStart(),trimEnd()
    // ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。
    
    const s = '  abc  ';
    
    s.trim() // "abc"
    s.trimStart() // "abc  "
    s.trimEnd() // "  abc"
    // 上面代码中,trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。
    
    // 除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。
    
    // 浏览器还部署了额外的两个方法,trimLeft()是trimStart()的别名,trimRight()是trimEnd()的别名。
    // 模板字符串 
    // 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。
    
    $('#result').append(
      'There are <b>' + basket.count + '</b> ' +
      'items in your basket, ' +
      '<em>' + basket.onSale +
      '</em> are on sale!'
    );
    // 上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
    
    $('#result').append(`
      There are <b>${basket.count}</b> items
       in your basket, <em>${basket.onSale}</em>
      are on sale!
    `);
    // 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
    // 字符串中嵌入变量
    let name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`
    $('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `);
    // 上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。
    
    $('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `.trim());
    // 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
    // 模板编译 
    // 下面,我们来看一个通过模板字符串,生成正式模板的实例。
    let template = `
    <ul>
      <% for(let i=0; i < data.supplies.length; i++) { %>
        <li><%= data.supplies[i] %></li>
      <% } %>
    </ul>
    `;
    // 上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式。
    // 怎么编译这个模板字符串呢?
    // 一种思路是将其转换为 JavaScript 表达式字符串。
    
    echo('<ul>');
    for(let i=0; i < data.supplies.length; i++) {
      echo('<li>');
      echo(data.supplies[i]);
      echo('</li>');
    };
    echo('</ul>');
    // 标签模板
    alert`123`
    // 等同于
    alert(123)
    如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
    
    let a = 5;
    let b = 10;
    
    tag`Hello ${ a + b } world ${ a * b }`;
    // 等同于
    tag(['Hello ', ' world ', ''], 15, 50);
    // 上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。
    // 函数tag依次会接收到多个参数。
    
    function tag(stringArr, value1, value2){
      // ...
    }
    
    // 等同于
    
    function tag(stringArr, ...values){
      // ...
    }
    // tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
    
    // tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。
    // tag函数所有参数的实际值如下。
    
    // 第一个参数:['Hello ', ' world ', '']
    // 第二个参数: 15
    // 第三个参数:50
    // 也就是说,tag函数实际上以下面的形式调用。
    
    tag(['Hello ', ' world ', ''], 15, 50)
    let a = 5;
    let b = 10;
    
    function tag(s, v1, v2) {
      console.log(s[0]);
      console.log(s[1]);
      console.log(s[2]);
      console.log(v1);
      console.log(v2);
    
      return "OK";
    }
    tag`Hello ${ a + b } world ${ a * b}`;
    tag(['Hello ', ' world ', ''], 5, 10)
    // "Hello "
    // " world "
    // ""
    // 15
    // 50
    // "OK"

     

    展开全文
  • es6字符串新增方法

    2019-07-08 14:44:00
    1、JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。如果不存在返回-1,如果存在返回字符串的位置。ES6 又提供了三种新方法。 includes():返回布尔值,表示是否找到了参数字符串...
  • ES6 字符串新增方法

    2020-05-12 19:12:34
    字符串新增方法 1.String.fromcodePoint() 可识别大于 0xFFFF的字符,弥补了String.formCharCode()方法的不足。在作用上,正好与下面的codePointAt()方法相反。 String.fromCodePoint(0x20BB7) // "????" ...
  • ES6之前,我们只能用indexOf来判断一个字符串是否包含另外一个字符串。现在ES6提供了三个新方法: includes:返回布尔值,表示是否找到字符串 startsWith:返回布尔值,表示参数字符串是否在源字符串的开头 ...
  • es6字符串新增特性

    2019-03-14 09:28:58
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...es6字符串新增特性</title> </head> <body> <script> //unicode 表示方法 { con...
  • ES6字符串模板 字符串新增方法

    千次阅读 2019-03-03 12:44:02
    模板字符串的基本用法: 模板语法:Esc键上的单引号:` ` 以前的写法:无法换行,需要使用字符串拼接 let html = "&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&...
  • ES6 字符串新增方法

    2019-05-02 00:12:40
    字符串新增方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 846
精华内容 338
关键字:

es6字符串新增方法