JavaScript字符串常用方法详解与实战示例

作者:木棉

时间:2026-10-30

浏览:240

本文系统梳理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
  }

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章