js字符串操作总结(必看篇)

本文链接: https://www.jb51.net/article/97915.htm

字符方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符方法</title>

</head>

<body>

<script type="text/javascript">

/*

charAt方法和charCodeAt方法都接收一个参数，基于0的字符位置

charAt方法是以单字符字符串的形式返回给定位置的那个字符

charCodeAt方法获取到的不是字符而是字符编码

*/

var str="hello world";

console.log(str.charAt(1));//e

console.log(str.charCodeAt(1));//101

//还可以使用方括号加数字索引来访问字符串中特定的字符

console.log(str[1]);//e

</script>

</body>

</html>

字符串操作方法
concat方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>concat方法</title>

</head>

<body>

<script type="text/javascript">

var str="hello ";

var res=str.concat("world");

console.log(res);//hello world

console.log(str);//hello 这说明原来字符串的值没有改变

var res1=str.concat("nihao","!");

console.log(res1);//hello nihao! 说明concat方法可以接收任意多个参数

//虽然concat方法是专门用来拼接字符串的，但是实践中我们使用最多的还是加操作符+，因为其简易便行

</script>

</body>

</html>

slice方法、substring方法、substr方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串操作方法</title>

</head>

<body>

<script type="text/javascript">

/*

slice方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置

substring方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置

substr方法：第一个参数指定子字符串开始位置，第二个参数表示返回的字符个数

这三个方法都会返回被操作字符串的一个子字符串，都接收一或两个参数

如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。这些方法也不会修改字符串本身，只是返回一个基本类型的字符串值

*/

var str="hello world";

console.log(str.slice(3));//lo world

console.log(str.substring(3));//lo world

console.log(str.substr(3));//lo world

console.log(str.slice(3,7));//lo w 7表示子字符串最后一个字符后面的位置简单理解就是包含头不包含尾

console.log(str.substring(3,7));//lo w

console.log(str.substr(3,7));//lo worl 7表示返回7个字符

console.log(str.slice(3,-4));//lo w -4+11=7表示子字符串最后一个字符后面的位置简单理解就是包含头不包含尾

console.log(str.substring(3,-4));//hel 会转换为console.log(str.substring(3,0));

//此外由于这个方法会将较小数作为开始位置，较大数作为结束位置，所以相当于调用console.log(str.substring(0,3));

console.log(str.substr(3,-4));//""空字符串

console.log(str.substring(3,0));

</script>

</body>

</html>

字符串位置方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串位置方法</title>

</head>

<body>

<script type="text/javascript">

/*

indexOf方法和lastIndexOf方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置，如果没有找到，则返回-1

indexOf方法是从字符串的开头向后搜索子字符串，lastIndexOf方法正好相反

这两个方法都可以接收两个参数：要查找的子字符串和查找的位置

*/

var str="hello world";

console.log(str.indexOf("o"));//4

console.log(str.lastIndexOf("o"));//7

console.log(str.indexOf("o",6));//7

console.log(str.lastIndexOf("o",6));//4

</script>

</body>

</html>

trim方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>trim方法</title>

</head>

<body>

<script type="text/javascript">

/*

trim方法用来删除字符串前后的空格

*/

var str=" hello world ";

console.log('('+str.trim()+')');//(hello world)

console.log('('+str+')');//( hello world )

</script>

</body>

</html>

字符串大小写转换方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>大小写转换</title>

</head>

<body>

<script type="text/javascript">

var str="HELLO world";

console.log(str.toLowerCase());//hello world

console.log(str.toUpperCase());//HELLO WORLD

</script>

</body>

</html>

字符串模式匹配方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串模式匹配</title>

</head>

<body>

<script type="text/javascript">

/*

match方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式

search方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式

search方法返回字符串中第一个匹配项的索引，如果没有匹配项，返回-1

*/

var str="cat,bat,sat,fat";

var pattern=/.at/;

var matches=str.match(pattern);

console.log(matches.index);//0

console.log(matches[0]);//cat

console.log(pattern.lastIndex);//0

//lastIndex表示开始搜索下一个匹配项的字符位置，从0算起

var pos=str.search(/at/);

console.log(pos);//1 1表示at字符串在原来字符串中第一次出现的位置

</script>

</body>

</html>

replace方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>replace方法</title>

</head>

<body>

<script type="text/javascript">

var str="cat,bat,sat,fat";

var res=str.replace("at","one");//第一个参数是字符串，所以只会替换第一个子字符串

console.log(res);//cone,bat,sat,fat

var res1=str.replace(/at/g,"one");//第一个参数是正则表达式，所以会替换所有的子字符串

console.log(res1);//cone,bone,sone,fone

</script>

</body>

</html>

split方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>split方法</title>

</head>

<body>

<script type="text/javascript">

/*

split方法是基于指定的字符，将字符串分割成字符串数组

当指定的字符为空字符串时，将会分隔整个字符串

*/

var str="red,blue,green,yellow";

console.log(str.split(","));//["red", "blue", "green", "yellow"]

console.log(str.split(",",2));//["red", "blue"] 第二个参数用来限制数组大小

console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""]

//第一项和最后一项为空字符串是因为正则表达式指定的分隔符出现在了子字符串的开头，即"red"和"yellow"

//[^...] 不在方括号内的任意字符只要不是逗号都是分隔符

</script>

</body>

</html>

localeCompare方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>localeCompare方法</title>

</head>

<body>

<script type="text/javascript">

/*

这个方法用于比较两个字符串

1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数

1.如果字符串等于字符串参数，则返回0

1.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数

*/

var str="yellow";

console.log(str.localeCompare("brick"));//1

console.log(str.localeCompare("yellow"));//0

console.log(str.localeCompare("zoo"));//-1

</script>

</body>

</html>

fromCharCode方法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>fromCharCode方法</title>

</head>

<body>

<script type="text/javascript">

/*

fromCharCode方法是接收一或多个字符编码，然后将其转换为字符串

fromCharCode方法是String构造函数的一个静态方法

*/

console.log(String.fromCharCode(104,101,108,108,111));//hello

</script>

</body>

</html>

找到匹配字符串所在的各个位置

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串匹配</title>

</head>

<body>

<script type="text/javascript">

/*找到匹配字符串所在的各个位置*/

var str="asadajhjkadaaasdasdasdasd";

var position=[];

var pos=str.indexOf("d");

while(pos>-1){

position.push(pos);

pos=str.indexOf("d",pos+1);

}

console.log(position);//[3, 10, 15, 18, 21, 24]

</script>

</body>

</html>

字符串去重

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串去重</title>

</head>

<body>

<script type="text/javascript">

//String.split() 执行的操作与 Array.join 执行的操作是相反的

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

//join方法用于将字符串数组连接成一个字符串

//如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

var str="aahhgggsssjjj";//这里字符串没有可以分隔的字符，所以需要使用空字符串作为分隔符

function unique(msg){

var res=[];

var arr=msg.split("");

//console.log(arr);

for(var i=0;i<arr.length;i++){

if(res.indexOf(arr[i])==-1){

res.push(arr[i]);

}

return res.join("");

}

console.log(unique(str));//ahgsj

</script>

</body>

</html>

判断字符串中字符出现的次数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>字符串操作</title>

</head>

<body>

<script type="text/javascript">

/*

1.先实现字符串去重

2.然后对去重后的数组用for循环操作，分别与原始数组中各个值进行比较，如果相等则count++,循环结束将count保存在sum数组中，然后将count重置为0

3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的

*/

var str="aacccbbeeeddd";

var sum=[];

var res=[];

var count=0;

var arr=str.split("");

for(var i=0;i<arr.length;i++){

if(res.indexOf(arr[i])==-1){

res.push(arr[i]);

}

for(var i=0;i<res.length;i++){

for(var j=0;j<arr.length;j++){

if(arr[j]==res[i]){

count++;

}

sum.push(count);

count=0;

}

console.log(res);//["a", "c", "b", "e", "d"]

for(var i=0;i<res.length;i++){

var str=(sum[i]%2==0)?"偶数":"奇数";

console.log(res[i]+"出现了"+sum[i]+"次");

console.log(res[i]+"出现了"+str+"次");

}

</script>

</body>

</html>

阿里面试-字符串操作

<script type="text/javascript">

var str = "www.taobao.com";

var res = str.split("").reverse().join("").replace('oat','');

console.log(res);//moc.oab.www

</script>

js字符串操作总结(必看篇)的更多相关文章

利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
基于StringUtils工具类的常用方法介绍(必看篇)
前言:工作中看到项目组里的大牛写代码大量的用到了StringUtils工具类来做字符串的操作,便学习整理了一下,方便查阅. isEmpty(String str) 是否为空,空格字符为false is ...
浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格等 ...
（转载）Android之有效防止按钮多次重复点击的方法(必看篇)
为了防止测试妹子或者用户频繁点击某个按钮,导致程序在短时间内进行多次数据提交or数据处理,那到时候就比较坑了~ 那么如何有效避免这种情况的发生呢? 我的想法是,判断用户点击按钮间隔时间,如果间隔时间太 ...
js 字符串操作函数有哪些
js 字符串操作函数有哪些一.总结一句话总结:js字符串函数都是字符串对象的方法,是通过调用字符串方法的方式调用,和java,php里面不一样. 1.字符串替换函数怎么用? 这里的正则表示是加双引 ...
js字符串操作
javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...
页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
模块化 require.js 入门教学(前端必看系列)
在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化前端模块化 !!! JS 模块化提供给我们三种规范分别就是 No.1 commonjs 这个其实也就代表了node. ...
js字符串操作总结
字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

随机推荐

SPA项目开发之动态树以及数据表格和分页
首先我们来看下数据库 t_vue_user t_vue_tree_node t_vue_articles 2. 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key=&qu ...
Codeforces Round #588 (Div. 2)
传送门 A. Dawid and Bags of Candies 乱搞. Code #include <bits/stdc++.h> #define MP make_pair #defin ...
201871010111-刘佳华《面向对象程序设计（java）》第十四周学习总结
201871010111-刘佳华<面向对象程序设计(java)>第十四周学习总结实验十二 Swing图形界面组件(一) 实验时间 2019-11-29 第一部分:基础知识总结 1.设计 ...
navicat使用教程-PJ
navicat使用教程-PJ Navicat Keygen Patch是一款专门针对Navicat系列软件出品的一款小巧实用,功能强大的破解辅助工具.它能够实现对Navicat全系列版本进行激活破解, ...
去除mysql里面重复的行并留下id最小的
DELETE FROM wynews WHERE title IN (SELECT * FROM (SELECT title FROM wynews GROUP BY title HAVING COU ...
bzoj3293 分金币
题目链接 problem 圆桌上坐着n个人,每人有一定数量的金币,金币总数能被n整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金币数目相等.你的任务是求出被转手的金币数量的最小值. so ...
IT兄弟连 HTML5教程了解HTML5的主流应用3
5 基于HTML5的移动APP开发不同的操作系统中,需要安装用不同技术开发的APP,移动端的操作系统有很多种,但最主要有两大分支,一种在苹果iOS操作系统中使用Objective-C语言开发APP ...
链表中删除倒数第K个节点
问题描述分别实现两个函数,一个可以删除单链表中倒数第K个节点,另一个可以删除双链表中倒数第K个节点. 问题分析与解决从问题当中,我们只能得到一个链表和要删除的第K个节点的信息,于是就有以下思路:如 ...
springboot 2.0 配置 spring.jackson.date-format 不生效
展开问题:application.properties中的如下配置不生效,返回时间戳 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 原因分析: 拦截器 ...
C# rename files
static void RenameFiles() { string sourceDir = @"D:\ll"; string[] allFiles = Directory.Get ...

js字符串操作总结(必看篇)

js字符串操作总结(必看篇)的更多相关文章

随机推荐

热门专题