前端切图仔，常用的21个字符串方法

淩亂°似流年 2022-08-31 04:55 167阅读 0赞

![299fef190cfed3845ed89a312dbd1ccd.png][]

## 字符串方法 ##

一： charAt()方法

######    定义和用法 ######

charAt() 方法可返回指定位置的字符。

请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。

###### 实例 ######

在字符串 "Hello world!" 中，我们将返回位置 1 的字符：

##### 二：charCodeAt()方法 #####

###### 定义和用法 ######

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

###### 实例 ######

在字符串 "Hello world!" 中，我们将返回位置 1 的字符的 Unicode 编码：

##### 三：concat()方法 #####

###### 定义和用法 ######

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

###### 实例 ######

例子 1

在本例中，我们将把 concat() 中的参数连接到数组 a 中：

例子 2

在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来：

例子 3

在本例中，我们创建了三个数组，然后使用 concat() 把它们连接起来：

##### 四：fromCharCode() #####

###### 定义和用法 ######

fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

###### 实例 ######

在本例中，我们将根据 Unicode 来输出 "HELLO" 和 "ABC"：

##### 五：indexOf() #####

###### 定义和用法 ######

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

###### 实例 ######

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

以上代码的输出：

0
    -1
    6

##### 六：lastIndexOf() #####

###### 定义和用法 ######

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

###### 实例 ######

在本例中，我们将在 "Hello world!" 字符串内进行不同的检索：

以上代码的输出：

0
    -1
    6

##### 七：localeCompare() #####

###### 定义和用法 ######

用本地特定的顺序来比较两个字符串。

###### 实例 ######

在本例中，我们将用本地特定排序规则对字符串数组进行排序：

var str;
    str.sort (function(a,b){return a.localeCompare(b)})

##### 八：match() #####

###### 定义和用法 ######

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

###### 实例 ######

例子 1

在本例中，我们将在 "Hello world!" 中进行不同的检索：

输出：

world
    null
    null
    world!

例子 2

在本例中，我们将使用全局匹配的正则表达式来检索字符串中的所有数字：

输出：

1,2,3

##### 九：replace() #####

###### 定义和用法 ######

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

###### 实例 ######

例子 1

在本例中，我们将使用 "W3School" 替换字符串中的 "Microsoft"：

输出：

Visit W3School!

例子 2

在本例中，我们将执行一次全局替换，每当 "Microsoft" 被找到，它就被替换为 "W3School"：

输出：

Welcome to W3School! We are proud to announce that W3School
    has one of the largest Web Developers sites in the world.

例子 3

您可以使用本例提供的代码来确保匹配字符串大写字符的正确：

text = "javascript Tutorial";
    text.replace(/javascript/i, "JavaScript");

例子 4

在本例中，我们将把 "Doe, John" 转换为 "John Doe" 的形式：

name = "Doe, John";
    name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

例子 5

在本例中，我们将把所有的花引号替换为直引号：

name = '"a", "b"';
    name.replace(/"([^"]*)"/g, "'$1'");

例子 6

在本例中，我们将把字符串中所有单词的首字母都转换为大写：

name = 'aaa bbb ccc';
    uw=name.replace(/\b\w+\b/g, function(word){
      return word.substring(0,1).toUpperCase()+word.substring(1);}
      );

##### 十：search() #####

###### 定义和用法 ######

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

###### 实例 ######

例子 1

在本例中，我们将检索 "W3School"：

输出：

在下面的例子中，无法检索到 w3school（因为 search() 对大小写敏感）。

输出：

-1

例子 2

在本例中，我们将执行一次忽略大小写的检索：

输出：

##### 十一：slice()方法 #####

###### 定义和用法 ######

slice() 方法可从已有的数组中返回选定的元素。

###### 实例 ######

例子 1

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

George,John,Thomas
    John,Thomas
    George,John,Thomas

例子 2

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

George,John,Thomas,James,Adrew,Martin
    Thomas,James
    George,John,Thomas,James,Adrew,Martin

##### 十二：split()方法 #####

###### 定义和用法 ######

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

###### 实例 ######

例子 1

在本例中，我们将按照不同的方式来分割字符串：

输出：

How,are,you,doing,today?
    H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
    How,are,you

例子 2

在本例中，我们将分割结构更为复杂的字符串：

"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
    "|a|b|c".split("|")    //将返回["", "a", "b", "c"]

例子 3

使用下面的代码，可以把句子分割成单词：

var words = sentence.split(' ')
    
    或者使用正则表达式作为 separator：
    
    var words = sentence.split(/\s+/)

例子 4

如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]
    
    若只需要返回一部分字符，请使用 howmany 参数：
    
    "hello".split("", 3)    //可返回 ["h", "e", "l"]

##### 十三：substr()方法 #####

###### 定义和用法 ######

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

###### 实例 ######

例子 1

在本例中，我们将使用 substr() 从字符串中提取一些字符：

输出：

lo world!

例子 2

在本例中，我们将使用 substr() 从字符串中提取一些字符：

输出：

lo worl

##### 十四：substring() #####

###### 定义和用法 ######

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

###### 实例 ######

例子 1

在本例中，我们将使用 substring() 从字符串中提取一些字符：

输出：

lo world!

例子 2

在本例中，我们将使用 substring() 从字符串中提取一些字符：

输出：

lo w

##### 十五：toLocaleLowerCase() #####

###### 定义和用法 ######

toLocaleLowerCase() 方法用于把字符串转换为小写。

###### 实例 ######

在本例中，"Hello world!" 将以小写字母来显示：

##### 十六：toLocaleUpperCase() #####

###### 定义和用法 ######

toLocaleUpperCase() 方法用于把字符串转换为大写。

###### 实例 ######

在本例中，"Hello world!" 将以大写字母来显示：

##### 十七：toLowerCase() #####

###### 定义和用法 ######

toLowerCase() 方法用于把字符串转换为小写。

###### 实例 ######

在本例中，"Hello world!" 将以小写字母来显示：

##### 十八：toString() #####

###### 定义和用法 ######

toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

###### 实例 ######

在本例中，我们将把一个数字转换为字符串：

输出：

1337

##### 十九：toUpperCase() #####

###### 定义和用法 ######

toUpperCase() 方法用于把字符串转换为大写。

###### 实例 ######

在本例中，"Hello world!" 将以大写字母来显示：

##### 二十：trim() #####

###### 定义和用法 ######

trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

trim() 方法不会改变原始字符串。

trim() 方法不适用于 null, undefined, Number 类型。

###### 实例 ######

function myTrim(x) {
      return x.replace(/^\s+|\s+$/gm,'');
    }
    
    function myFunction() {
      var str = myTrim("        Runoob        ");
      alert(str);
    }

输出结果

Runoob

##### 二十一：valueOf() #####

###### 定义和用法 ######

valueOf() 方法可返回 String 对象的原始值。

注意：valueOf() 方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。

###### 实例 ######

返回 String 对象的原始值:

以上实例输出结果:

Hello world!

参考：https://www.runoob.com/jsref/jsref-obj-string.html

**大家好，这个月的干货又整理出来了。**

## **26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费）** ##

**话不多说，****关注「前端小辣椒」公众号 ，在微信后台回复「小程序」，获取以下小程序整源码大全。**

[299fef190cfed3845ed89a312dbd1ccd.png]: /images/20220829/55af3592a6944c07bc59148e4ba26d5f.png

前端切图仔，常用的21个字符串方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 20个常用的JavaScript字符串方法

相关前端常用的21个字符串方法

相关前端切图仔，常用的21个字符串方法

相关前端切图仔，常用的14个数组方法

相关前端切图仔，常用的21个字符串方法（上）

相关前端切图仔，常用的21个字符串方法（下）

相关前端开发-切图初了解

相关前端Photoshop切图快速入门

相关一个切图仔的HTML笔记

相关 JavaScript中常用的20个字符串方法