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

Ⅰ、问题描述:

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>

3、结果展示:
结果显示为:想要的数组元素转换成大写字母的结果;
在这里插入图片描述

Ⅲ、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!

Guess you like

Origin blog.csdn.net/weixin_43405300/article/details/117775267
Recommended