字符填充_第四节字符串模式及字符串新增

最新推荐文章于 2022-09-28 12:57:01 发布

陆牙

最新推荐文章于 2022-09-28 12:57:01 发布

阅读量152

点赞数

文章标签：字符填充

本文链接：https://blog.csdn.net/weixin_28677451/article/details/112584134

版权

1.字符串模式是什么？

例子1--传统

<script>
 let name ='Tina';
 let age =18;
 let str ='这个人叫'+name+'，年龄是'+age+'岁';

 console.log(str);

</script>

例子2--ES6中写法

<script>
 let name ='Tina';
 let age =18;
 let str =`这个人叫${name},年龄是${age}岁`;

 console.log(str);

</script>

let str =`这个人叫${name},年龄是${age}岁`; 这个就叫字符串模板

2.字符串模板的优点

可以随意换行

语法：` ${变量名字} `

例子3--传统写法字的符串链接

<head>
 <script>
 let  data=[
 {titli:'文章1',read:11},
 {titli:'文章2',read:22},
 {titli:'文章3',read:33},
 {titli:'文章4',read:44},
 {titli:'文章5',read:55},
 ]

  window.onload=funtion(){
   let oUl=document.querySelector('#ul1');

   for(let i=0;i<data.length;i++){
    var oLi=document.createElement('li');
 
    oLi.innerHTML=`<span>`+data[i].title+`</span>`
                   +`<span>这是阅读人数：`+data[i].read+`</span>`
                   +`<a href="javascript:;">详情</a>`;
   }
  }
 </script>
</head>
<body>
 <ul id="ul1">

 </ul>
</body>

例子4--ES6中字符串链接的写法

<head>
 <script>
 let  data=[
 {titli:'文章1',read:11},
 {titli:'文章2',read:22},
 {titli:'文章3',read:33},
 {titli:'文章4',read:44},
 {titli:'文章5',read:55},
 ]

  window.onload=funtion(){
   let oUl=document.querySelector('#ul1');

   for(let i=0;i<data.length;i++){
    var oLi=document.createElement('li');
 
    oLi.innerHTML=`<span> ${data[i].title} </span>
                   <span>这是阅读人数： ${data[i].read} </span>`
                   <a href="javascript:;">详情</a>`;
   }
  }
 </script>
</head>
<body>
 <ul id="ul1">

 </ul>
</body>

3.字符串查找

例子5--字符串查找，传统写法（或 if 去判断false、true）

<script>
 let str='apple banana pear';
 
 console.log(str.indexOf('apple'));
</script>

它的结果是：0

str.indexOf('要找的东西')--返回值是索引位置,没有找到返回的 -1

例子6--字符串查找，ES6写法

<script>
 let str='apple banana pear';
 
 alert(str.includes('banana'));
</script>

它的结果是：true

str.includes('要找的东西')--返回值是 false/true

例子7--includes：判断浏览器

<script>
 if(navigator.userAgent.includes('chrome')){
   alert('是chrome')
  }else{
   alert('不是chrome')
 }
</script>

它的结果是：true

4.字符串检测

例子8--字符串是否以谁开头

<script>
 let str='https://zhuanlan.zhihu.com/p/95292053/edit';
 let str='https://www.baidu.com/';

 console.log(str.startsWith('http'));
</script>

它的结果是：true

字符串是否以谁开头：str.startsWith('检测东西') 例如：检测地址

例子9--字符串是否以谁结尾

<script>
 let str='aaa.png';

 console.log(str.endsWith('aaa.png'));
</script>

它的结果是：true

字符串是否以谁结尾：str.endsWith('检测东西') 例如：检测是否以 .png 结尾

5.重复字符串

例子10--重复字符串

<script>
 let str='好好学习';

 console.log(str.repeat(3));
</script>

它的结果是：好好学习好好学习好好学习

str.repeat(次数)--重复几次

6.填充字符串

例子11--我想在 a 前面填充 xxx

<script>

 console.log('a'.padStart(4,'xxx'));
</script>

例子12--简单写法,方便改动 let 的东西（建议就这样写最好）

<script>
 let str='a';
 let padstr='xxx';

 console.log(str.padStart(str.length+padstr.length,padstr));
</script>

str.padStart(整个字符串的长度，填充东西) 往前填充

str.padEnd()(整个字符串的长度，填充东西) 往后填充

建议就这样写最好： str.padStart ( str.length+padstr.length , padstr )

thank you！下节见

陆牙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

字符填充_第四节 字符串模式及字符串新增

1.字符串模式是什么？

2.字符串模板的优点

3.字符串查找

4.字符串检测

5.重复字符串

6.填充字符串

字符填充_第四节字符串模式及字符串新增