前端切图仔,常用的21个字符串方法(上)

简介: 前端切图仔,常用的21个字符串方法(上)

字符串方法

更多方法实例可以参见:JavaScript String 对象

方法 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
一:charAt()方法
定义和用法

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

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

实例

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
//打印结果e
二:charCodeAt()方法
定义和用法

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

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

实例

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.charCodeAt(1))
</script>
//打印结果 101
三:concat()方法
定义和用法

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

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

实例

例子 1

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

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
//输出:1,2,3,4,5

例子 2

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

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
//输出:George,John,Thomas,James,Adrew,Martin

例子 3

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

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>
//输出:George,John,Thomas,James,Adrew,Martin,William,Franklin
四:fromCharCode()
定义和用法

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

实例

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

<script type="text/javascript">
document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))
</script>
//以上代码的输出:HELLO  ABC
五:indexOf()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>

以上代码的输出:

0
-1
6
六:lastIndexOf()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>

以上代码的输出:

0
-1
6
七:localeCompare()
定义和用法

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

实例

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

var str;
str.sort (function(a,b){return a.localeCompare(b)})
八:match()
定义和用法

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

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

实例

例子 1

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>

输出:

world
null
null
world!

例子 2

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

<script type="text/javascript">
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
</script>

输出:

1,2,3
九:replace()
定义和用法

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

实例

例子 1

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

<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>

输出:

Visit W3School!

例子 2

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

<script type="text/javascript">
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>

输出:

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":

<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/W3School/))
</script>

输出:

6

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

<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/w3school/))
</script>

输出:

-1

例子 2

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

<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/w3school/i))
</script>

输出:

6
相关文章
|
2月前
|
人工智能 前端开发 测试技术
AI:探究下前端组件化设计的实现方法及其重要性(一)
AI:探究下前端组件化设计的实现方法及其重要性
|
2月前
|
人工智能 缓存 前端开发
AI:探究下前端组件化设计的实现方法及其重要性(二)
AI:探究下前端组件化设计的实现方法及其重要性
|
2月前
|
前端开发 JavaScript API
微前端:一种新型的前端架构方法
微前端:一种新型的前端架构方法
46 0
|
1天前
|
前端开发 JavaScript API
|
3天前
|
前端开发 JavaScript 小程序
前端图片转base64 方法
前端图片转base64 方法
10 0
|
9天前
|
缓存 前端开发 JavaScript
深入理解前端性能优化方法
【2月更文挑战第1天】前端性能优化是提升用户体验、提高网站速度和效率的关键步骤。本文将深入探讨前端性能优化的各种方法,包括资源压缩与合并、懒加载、缓存策略、代码优化等,并提供实际案例和建议,帮助开发者更好地优化前端性能。
|
25天前
|
存储 算法 前端开发
常见的前端加密方法
常见的前端加密方法
18 3
|
2月前
|
Web App开发 前端开发 JavaScript
Web前端性能测试方法
Web前端性能测试方法
|
2月前
|
移动开发 前端开发 JavaScript
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
web前端之ES6的实用深度解构赋值方法、复杂的解构赋值
17 1
|
2月前
|
存储 算法 前端开发
面试官:你能说说常见的前端加密方法吗?
面试官:你能说说常见的前端加密方法吗?
148 0

相关产品

  • 云迁移中心