前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第39天:字符串连接、截取操作

第39天:字符串连接、截取操作

作者头像
半指温柔乐
发布2018-09-11 15:01:20
3370
发布2018-09-11 15:01:20
举报
文章被收录于专栏:前端知识分享前端知识分享

一、网址编码 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码 decodeURIComponent() 函数可把字符串作为 URI 组件进行解码 var url = "http://www.itcast.cn?name=andy"; console.log(encodeURIComponent(url)); // 编码

二、字符串操作

1、concat()//字符串连接

2、slice()   截取字符串

slice("取字符串的起始位置",[结束位置]);//初始位置一定要有,结束位置可有可无 var txt="abcedf"; txt.slice(3);//从txt里面字符的第3(索引号)个开始取,一直到最后 txt.slice(3,6);//取txt索引号3-6的字符串,不包含6 起始位置可以是负数,若是负数,从字符串右边向左边取 txt.slice(-1); 3、substr()  截取字符串,常用 substr(起始位置,[取得个数]); 不写个数,默认从起始位置到最后 substr(-1);少用,IE6、7、8报错 substring始终会把小的值作为起始值,较大的作为结束位置 例如:sunstring(6,3),实际中自动变成substring(3,6)

案例:

字符串操作

代码语言:javascript
复制
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>字符串连接</title>
 6 </head>
 7 <body>
 8     <div id="div1">who are you?</div>
 9     <div id="div2">my name is yangmi!</div>
10     <button id="btn1">concat</button><span></span><br/>
11     <button id="btn2">slice1</button><span></span><br/>
12     <button id="btn3">slice2</button><span></span><br/>
13     <button id="btn4">slice3</button><span></span><br/>
14     <button id="btn5">substr1</button><span></span><br/>
15     <button id="btn6">substr2</button><span></span><br/>
16     <button id="btn7">substr3</button><span></span><br/>
17 </body>
18 <script>
19     var div1=document.getElementById("div1").innerHTML;
20     var div2=document.getElementById("div2").innerHTML;
21     function onBtnClick(id,txt){
22         document.getElementById(id).onclick=function(){
23         this.nextSibling.innerHTML=txt;
24         }
25     }
26     onBtnClick("btn1",div1.concat(div2));
27     onBtnClick("btn2",div2.slice(3,7));
28     onBtnClick("btn3",div2.slice(3));
29     onBtnClick("btn4",div2.slice(-1));
30 
31     onBtnClick("btn5",div2.substr(3,4));
32     onBtnClick("btn6",div2.substr(3));
33     onBtnClick("btn7",div2.substr(div2.length-7,7));
34 
35 </script>
36 </html>

运行结果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档