JavaScript字符串常用方法详解与实战示例
本文系统梳理JavaScript中常用的字符串处理方法,涵盖字符获取、编码转换、位置查找、截取分割及大小写转换等核心API。通过具体代码示例,演示如何判断数字字符串、查找字符出现位置以及实现关键字高亮显示,帮助开发者掌握字符串操作的实际应用。
字符串字符获取与编码转换
在JavaScript中,字符串处理是前端开发的基础技能之一。本节首先介绍如何获取字符串中指定位置的字符。
该方法用于返回字符串中指定索引位置的单个字符。
var str="这是一串字符串";
console.log(str.charAt(0))//这
接下来,我们需要了解如何获取指定位置字符的Unicode编码值。
此方法返回指定索引位置字符对应的Unicode编码整数。
var str="这是一串字符串";
console.log(str.charCodeAt(0))
//这=>36825
与获取编码相反,JavaScript提供了通过Unicode编码还原字符的方法。
该方法根据传入的Unicode编码值,返回对应的字符。
console.log(String.fromCharCode(36825,26159))//这是
为了巩固对字符编码的理解,我们可以通过一个实例来验证字符串是否全为数字。
<body>
<input type="text" />
<input type="button" value="检测" />
<script>
var aInp = document.getElementsByTagName('input');
aInp[1].onclick = function () {
var val = aInp[0].value;
if ( detectNum(val) ) {
alert( '恭喜,'+ val +'全是数字' );
} else {
alert('输入有误');
}
};
function detectNum ( str ) {
var n = 0;
for ( var i=0; i<str.length; i++ ) {
n = str.charCodeAt(i);
if ( n<48 || n>57 )return false;
}
return true;
}
</script>
</body>
字符串位置查找与截取
在字符串中查找子串的位置是常见需求,indexOf方法用于定位首次出现的位置。
该方法返回指定子字符串在原字符串中首次出现的索引位置。语法为str.indexOf(查找值,开始查找下标)。若未找到目标字符串,则返回-1。
通过示例代码,我们可以演示如何查找特定字符在字符串中出现的索引位置。
<script>
var str = 'xsxsxscdecdcdxsxsxs';
var num = 0;
var s = 'xs';
var arr = [];
for (; str.indexOf(s, num) != -1;) {
num = str.indexOf(s, num) + s.length
arr.push(num)
}
console.log(arr)
</script>
除了从前向后查找,JavaScript也支持从后向前搜索字符串。
该方法用于查找指定子字符串在字符串中最后一次出现的位置,即从后往前搜索。
提取字符串的子串是字符串操作的另一个重要方面。
该方法用于提取字符串中两个指定索引之间的字符,包含起始索引,不包含结束索引。
字符串大小写转换与分割合并
字符串的大小写转换也是常用功能之一。
此方法将字符串中的所有字母转换为大写形式。
与toUpperCase相对,该方法将字符串中的所有字母转换为小写形式。
字符串与数组之间的相互转换在处理数据时非常有用。
该方法用于将字符串按照指定的分隔符分割成字符串数组。
split方法的参数包括分隔符以及可选的数组长度限制。
以下是split方法的几种典型用法示例。
var str="121314";
str.split("") //[1,2,1,3,1,4];
str.split("1")//[ ,2,3,4];
str.split("",2)//[1,2]
10.arrObject.join()
与split相反,join方法用于将数组元素合并为一个字符串。
该方法通过指定的分隔符将数组中的所有元素连接成一个字符串。
var arr = [1,2,3];
arr.join("")//123
arr.join("-")//1-2-3
字符串处理实战:关键字高亮显示
最后,我们结合上述知识,通过一个实例演示如何在页面中高亮显示查找的关键字。
<input type="text" id="oin" />
<button>按钮</button>
var oin = document.getElementById("oin");
var obtn = document.getElementsByTagName('button')[0];
var str = "arguments对象的长度是由实参个数而不是形参个数决定的。
形参是函数内部重新开辟内存空间存储的变量,但是其与arguments对象
内存空间并不重叠。对于arguments和值都存在的情况下,两者值是同步的
,但是针对其中一个无值的情况下,对于此无值的情形值不会得以同步。
如下代码可以得以验证。";
var h = "";
obtn.onclick = function() {
if (oin.value == "") {
alert("输入为空");
return false
}
var s = oin.value;
if (str.indexOf(s) == -1) {
alert("没有这个数字");
return false
}
var m = '<span style="background-color:red">' + s + '</span>';
str = str.split(s);
h = str.join(m)
document.body.innerHTML=h
}
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
