用ES6的模板标签实现，将数组中的所有元素都换成大写字母

最新推荐文章于 2023-06-30 14:48:56 发布

狮子座的男孩

最新推荐文章于 2023-06-30 14:48:56 发布

阅读量897

点赞数 1

分类专栏： # 前端实战与例子文章标签： js es6 前端

本文链接：https://blog.csdn.net/weixin_43405300/article/details/117775267

版权

前端实战与例子专栏收录该内容

53 篇文章 10 订阅

订阅专栏

Ⅰ、问题描述：

1、用 JavaScript 及 ES6 语法实现，将数组元素转换成大写字母的功能；
2、分析：
A、熟悉 ES6 语法，将字符串中的变量和字符串分别放在两个数组中；
B、分别将两个数组的元素值分别转换成大写字母，再拼接起来；

Ⅱ、实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let name = 'Tender';
    let age = 25;
    function tag(str) {
      let res = '';  //该代码是 res 字符串的声明；
      let arr = [];  
      let arr2 = arguments[0]; //arguments 是 str 的属性，其能以 '${}' 为标记将 res2 的字符串分成三个部分，arguments[0]就代表着{0:['My name is ',',I am ',' years old']};
            
      for(var k in arguments){ //此时只能使用for in循环操作，因为 arguments 是类数组而不是真数组；
        if(k!=0){
          arr.push(arguments[k]);//push 操作，将循环出来的元素添加到 arguments 的后面；
        }
      }

      for(var key in arr){  //将 arr[0],arr[1] 和 arr2[0],arr[1] 的元素转换成大写字母；
        res += arr2[key].toUpperCase() + arr[key].toString().toUpperCase(); //toUpperCase() 操作是将字符串转换成大写字母;  'arr[key].toString()'操作是因为在 arr[] 数组中存在元素不是字符串的情况；
      }
      res += arr2[arr2.length-1].toUpperCase(); //将 arr2[2] 的元素也准换成大写字母，并拼接上去；

      console.log(res);
    }

    let res2 = tag`My name is ${name}, I am ${age} years old.`;  //此时的 tag 标签就称为模板标签； 而'${name}'值指 ES6 的模板字符串；
  </script>
</body>
</html>