ES2018新增加的一些东西_es2018 link-优快云博客

本文链接：https://blog.youkuaiyun.com/VVVZCS/article/details/82767433

1，命名捕获

语法： (?<名字>)

先来看一个原来的捕获正则;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  let str = '2018-03-20';
  let reg = /(\d{4})-(\d{2})-(\d{2})/;
  let dateArr = str.match(reg);
  console.log(dateArr);
  let year = dateArr[1];
  let mouth = dateArr[2];
  let day = dateArr[3];
  console.log(year, mouth, day);
</script>
</script>
</script>
</html>

这是用数组下标的方法来调出匹配项，现在也可以使用命名的方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  let str = '2018-03-20';
  let reg = /(?<year>\d{4})-(?<mouth>\d{2})-(?<day>\d{2})/;
  let dateArr = str.match(reg);
  console.log(dateArr);
  console.log(dateArr.groups);
  let {year, mouth, day} = dateArr.groups;
  console.log(year, mouth, day);
</script>
</script>
</script>
</html>

原来的反向引用：

\1 \2 $1 $2

反向引用命名捕获：

语法：\k<名字>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  let reg = /^(?<str>welcome)-\k<str>$/;
  console.log(reg.test('a-a'));
  console.log(reg.test('RESWORD-RESWORD'));
  console.log(reg.test('welcome-RESWORD'));
  console.log(reg.test('welcome-welcome'));
</script>
</script>
</script>
</html>

当然原来的反向引用也可以用在命名捕获上

也是一样的结果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  let str = '2018-03-20';
  let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
  str = str.replace(reg, '$<day>/$<month>/$<year>');
  console.log(str);
</script>
</script>
</script>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  let str = '2018-03-20';
  let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
  str = str.replace(reg, (...argus) => {
    let {year, month, day} = argus[argus.length - 1];
    return `${day}/${month}/${year}`;
  });
  console.log(str);
</script>
</script>
</script>
</html>

2，dotAll模式：

在之前的的正则表达式中虽然 . 代表匹配任意东西，但是不包括\n ，这就有点麻烦了，一般我们都是加上m，现在也可以加上s，表示 . 匹配任意东西，包括换行,

3，标签函数

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
  function fun(args) {
    console.log(args);
  }
  // fun();正常函数的调用
  console.log(fun`welcome`);//标签函数的调用
</script>
</script>
</script>
</html>

变换成大写字母