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


    一、网址编码
    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)

    案例:

    字符串操作

     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>

    运行结果:

  • 相关阅读:
    [深入理解Android卷一全文-第七章]深入理解Audio系统
    【小超_Android】GitHub源码项目整理,希望对大家有帮助
    时序图与状态图(Rose)
    贪吃蛇c++实现
    int*与(int*)的差别
    5、使用Libgdx设计一个简单的游戏------雨滴
    (最短路径算法整理)dijkstra、floyd、bellman-ford、spfa算法模板的整理与介绍
    springmvc结合base64存取图片到mysql
    /dev/random和/dev/urandom的一点备忘
    Highcharts使用表格数据绘制图表
  • 原文地址:https://www.cnblogs.com/le220/p/7571959.html
Copyright © 2020-2023  润新知