灏天阁

字符串

· Yin灏

新增的方法

  1. includes 方法
let str = 'hello world';
console.log(str.indexOf('world') >= 0); // true
console.log(str.includes('world')); // true
  1. startsWith() 方法
var str = 'hello world';
console.log(str.indexOf('hello') === 0); // true
console.log(str.startsWith('hello')); // true

// 指定开始搜索的位置
console.log(str.indexOf('world') === 6); // true
console.log(str.startsWith('world', 6)); // true
  1. endsWith() 方法
var str = 'hello world';
console.log(str.endsWith('world')); // true
console.log(str.endsWith('wo', 8)); // true
  1. repeat 方法

ES6 之前想重复 n 次某个字符串以生成新的字符串，必须使用循环来实现。现在可以使用 repeat 方法实现。

console.log('#'.repeat(100));

var str = `<div>test</div>`;
console.log(str.repeat(3)); // <div>test</div><div>test</div><div>test</div>
  1. padStart 和 padEnd 方法
  • padStart: 会在字符串前填充字符
  • padEnd: 会在字符串后填充字符
console.log('9.10'.padStart(8)); // '     9.10'
// 总共 8 位，包含小数点
console.log('9.10'.padEnd(8, '0')); // '9.100000'
// 如果指定的字符串长度超过需要填充的字符长度，就会截断指定的字符串再填充
console.log('a'.padStart(8, '123456789')); // '1234567a'

模板字面量

  • 嵌套模板
let menuData = [{
        text: '主页',
        url: '/home'
    },
    {
        text: '产品',
        url: '/products'
    },
    {
        text: '服务',
        url: '/services'
    },
    {
        text: '关于',
        url: '/about'
    },
    {
        text: '联系',
        url: '/contact'
    }
];

let menu = `
  <ul class="nav">
    ${menuData.map(item => `
      <li class="nav-item">
        <a href="${item.url}" class="nav-link">${item.text}</a>
      </li>
    `).join('')}
  </ul>
`;

console.log(menu);

/*

深度思考：

let menu = `
  <ul class="nav">
    ${menuData.map((item, index) => 
    `<li class="${index == 0 ? 'nav-item-0' : 'nav-item'}">
        <span style="display: ${index == 0 ? 'none': 'block'}">span</span>
        <a href="${item.url}" class="nav-link">${item.text}</a>
      </li>
    `).join('')}
  </ul>
`;

*/

/*
  结果：
  <ul class="nav">
      <li class="nav-item">
        <a href="/home" class="nav-link">主页</a>
      </li>
    
      <li class="nav-item">
        <a href="/products" class="nav-link">产品</a>
      </li>
    
      <li class="nav-item">
        <a href="/services" class="nav-link">服务</a>
      </li>
    
      <li class="nav-item">
        <a href="/about" class="nav-link">关于</a>
      </li>
    
      <li class="nav-item">
        <a href="/contact" class="nav-link">联系</a>
      </li>
  </ul>
*/
  • 带标签的模板字面量

在模板字面量的定义前可以添加一个函数名称，以便让函数来处理模板字面量。

function tag(strings, ...keys) {
    console.log(strings); //  ["你好,来自", "的", "!"]
    console.log(keys); //  ["广东", "小明"]
    if (keys[0] == '广东') {
        console.log('我是广东的小明');
    }
}

let names = '小明';
let province = '广东';
let str = tag `你好,来自${province}的${names}!`;
  • 原始值

在标签函数的第一个参数中，有一个 raw 属性，可以访问模板字面量的原始字符串，主要是指访问字符未转义之前的字符串。

function tag(strings, ...keys) {
    console.log(strings[0]);
    /*
        你好,
        来自
    */
    console.log(strings.raw[0]); //  '你好,\n来自'

}
let names = '小明';
let province = '广东';
let str = tag `你好,\n来自${province}的${names}!`;

- Book Lists -