专栏首页编程微刊JS中字符串(String)常见的方法

JS中字符串(String)常见的方法

1:charAt()方法

charAt()返回字符串中x位置的字符,下标从 0 开始。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
    //charAt(x)返回字符串中x位置的字符,下标从 0 开始。
    var myString = 'wangxiaoting';
    console.log(myString.charAt(7));
    
    </script>
</html>

打印结果

2:concat() 方法

concat() 方法用于连接两个或多个字符串,此方法不改变现有的字符串,返回拼接后的新的字符串。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
     var name="wnagxiaoting"
     var singel = name.concat(" is a","beautiful  girls")
     console.log(singel)
    </script>
</html>

打印结果

3:slice()

slice() 提取字符串的一部分片段,并返回一个新的字符串 接收起始位置但不接收末尾位置,俗称留头不留尾

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
    //slice() 方法可提取字符串的某个部分,返回一个新的字符串。
    //包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
    var myString="wangxiaoting"
    console.log(myString.slice(0,5) ) //打印结果 "wangx"
    console.log( myString.slice(1,6)) //打印结果 "angxi"
    </script>
</html>
4:substring()

返回位于String对象中指定位置的子字符串,作用是提取字符串的子串,和slice一样也是留头不留尾

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
    //substring() 方法用于提取字符串中介于两个指定下标之间的字符,
    //方返回的子串包括 start 处的字符,但不包括 stop 处的字符,to 可选,如果省略该参数,那么返回的子串会一直到字符串的结尾。
    var myString = 'wangxiaoting';
    myString = myString.substring(0,4);
    
    console.log(myString)//打印结果  wang
    </script>
</html>
5: substr 方法

返回一个从指定位置开始到指定长度的字符串

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
    //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串 
    var text="wangxiaoting"
    console.log(text.substr(3,4)) //打印结果 gxia
    console.log(text.substr(2,7)) //打印结果 ngxiaot

    </script>
</html>
6:indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
       //从0位置开始搜索,返回第一个匹配的字符串的位置;搜索不到返回-1
       var str="ab cd efg";
       console.log(str.indexOf("cd"));
      
       var str1="my name is wangxiaoting ";
       console.log(str1.indexOf("is")); 
       
       //indexOf("要搜索的字符串",开始搜索的位置);
       var str2="abcedfghighdckkccccc";
       console.log(str2.indexOf("c",13));//从下标是15的位置开始搜索,返回第一个匹配的字符串的位置;搜索不到返回-1
    </script>
</html>
7:split 方法

split() 方法用于把一个字符串分割成字符串数组。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
        //把一个字符串分割成字符串数组。
       var myString="my name is wangxiaoting";
       console.log(myString.split(" ")); 
    </script>
</html>
9:trim()

trim() 方法会从一个字符串的两端删除空白字符。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>       
    </head>
    <body>         
    </body> 
    <script type="text/javascript">
    var myString = "     wang  xiao  ting     ";
    console.log(myString.trim());
    //打印结果  wang  xiao  ting
    </script>
</html>

10:lastIndexOf(string)

返回String对象内最后一次出现子字符串位置。如果没有找到子字符串,则返回-1。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var myString = "wangxiaoting"
        console.log(myString.lastIndexOf("a")) //6
        console.log(myString.lastIndexOf("g")) //11
    </script>
</html>
11: toUpperCase方法和toLowerCase方法

toUpperCase方法返回一个字符串,该字符串中的所有字母都被转换为大写字母。 toLowerCase:方法返回一个字符串,该字符串中的字母被转换成小写。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var myString = "wangxiaoting"
        console.log(myString.toLowerCase());//wangxiaoting
        console.log(myString.toUpperCase());//WANGXIAOTING
    </script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue解析json数据的渲染

    参考:ajax和axios请求本地json数据对比 https://www.jianshu.com/p/4b9cb79fedd5

    祈澈菇凉
  • vue输入框禁止输入非数字(兼容IE火狐)

    祈澈菇凉
  • ajax请求接口,jquery拼接数据循环

    关于上一篇写的文章,jquery拼接数据循环一个数据列表:https://www.jianshu.com/p/d4034550fcf3。如果把json写在接口数...

    祈澈菇凉
  • Vue教程(组件案例-评论列表)

      前面给大家介绍了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下:

    用户4919348
  • XSS攻击与防范

    XSS攻击,又称为CSS(Cross Site Scripting),由于CSS已经被用作层叠样式表,为了避免这个冲突,我们将Cross缩写成X。XSS攻击的中...

    木可大大
  • 介绍bigpipe以及bigpipe在django上的实现

    什么是BigPipe 关于BigPipe是在看一篇淘宝ued的官方博客上看到的,原文是说用nodejs做前后端分离的,只是稍微提了一下bigpipe。 感兴趣...

    Bob.Chen
  • Go里面的unsafe包详解

    原文:http://www.tapirgames.com/blog/golang-unsafe

    我的小碗汤
  • Vue第二天

    使用场景: 当需要对普通的DOM元素进行底层的操作时可以考虑使用自定义指令实现. 自定义指令分两种:

    生南星
  • javafx框架tornadofx入门26_treeview_增加删除修改

    用户6167008
  • Logstash使用jdbc_input同步Mysql数据时遇到的空时间SQLException问题

    今天在使用Logstash的jdbc_input插件同步Mysql数据时,本来应该能搜索出10条数据,结果在Elasticsearch中只看到了4条,终端中只给...

    大江小浪

扫码关注云+社区

领取腾讯云代金券