截取字符串的三个函数的简单使用

最新推荐文章于 2024-10-09 20:11:00 发布

篆愁君的烦恼

最新推荐文章于 2024-10-09 20:11:00 发布

阅读量2.3k

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_52228992/article/details/124181654

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的三种字符串截取方法：slice()、substring()和substr()，并提供了示例代码。通过点击按钮，展示了这三种方法在实际应用中如何改变字符串部分内容。示例中，字符串初始为'截取字符串实验字段'，点击不同按钮后，分别截取了从索引1到3的字符。

摘要由CSDN通过智能技术生成

1、slice() 截取

stringObject.slice(start, end)

strat：开始位置（索引），可选，默认为0（一般不这么写，如有需要，以空字符串“”代替start参数）；end：结束位置（索引），可选，不提供，默认为字符串的末尾

2、substring()截取

stringObject.substring(start, stop)

start:开始位置（索引），可选，默认为0（同上）;end:结束位置（索引），可选，不提供，默认为字符串末尾

3、substr() 截取

stringObject.substr(start, length)

start：开始位置（索引），可选，默认为0（同上）；length：截取长度，可选，不提供，默认到字符串末尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js" type="text/javascript"></script>
<div id="app">
  <input type="button" value="slice" @click="fun1">
  <input type="button" value="substring" @click="fun2">
  <input type="button" value="substr" @click="fun3">
  <input type="text" v-model="msg">
</div>
<script>
  var MyVue=new Vue({
    el:"#app",
    data:{
      msg:"截取字符串实验字段"
    },
    methods:{
      fun1:function () {
        this.msg=this.msg.slice(1,3);
      },
      fun2:function () {
        this.msg=this.msg.substring(1,3);
      },
      fun3:function () {
        this.msg=this.msg.substr(1,3);
      }
    }
  })

</script>
</body>
</html>

执行结果如下

默认页面：