前端切图仔,常用的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() 返回某个字符串对象的原始值
十一:slice()方法
定义和用法

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

实例

例子 1

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

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>

输出:

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

例子 2

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

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)
</script>

输出:

George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin
十二:split()方法
定义和用法

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

实例

例子 1

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

<script type="text/javascript">
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>

输出:

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() 从字符串中提取一些字符:

<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3))
</script>

输出:

lo world!

例子 2

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

<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3,7))
</script>

输出:

lo worl
十四:substring()
定义和用法

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

实例

例子 1

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

<script type="text/javascript">
var str="Hello world!"
document.write(`str.substring(3)`)
</script>

输出:

lo world!

例子 2

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

<script type="text/javascript">
var str="Hello world!"
document.write(`str.substring(3,7)`)
</script>

输出:

lo w
十五:toLocaleLowerCase()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello World!"
document.write(str.toLocaleLowerCase())
</script>
十六:toLocaleUpperCase()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello World!"
document.write(str.toLocaleUpperCase())
</script>
十七:toLowerCase()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello World!"
document.write(str.toLowerCase())
</script>
十八:toString()
定义和用法

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

实例

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

<script type="text/javascript">
var number = new Number(1337);
document.write (number.toString())
</script>

输出:

1337
十九:toUpperCase()
定义和用法

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

实例

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

<script type="text/javascript">
var str="Hello World!"
document.write(str.toUpperCase())
</script>
二十: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 对象的原始值:

<script>
var str="Hello world!";
document.write(str.valueOf());
</script>

以上实例输出结果:

Hello world!
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
54 5
|
2月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
69 5
|
3月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
4月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
61 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
3月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
4月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
211 0
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
143 0
|
4月前
|
前端开发 JavaScript
前端基础(十五)_时间对象、字符串对象
本文介绍了JavaScript中时间对象的操作方法,包括获取和设置年、月、日、小时、分钟、秒等,以及如何格式化时间显示,同时提及了字符串对象的常用方法。
36 0
前端基础(十五)_时间对象、字符串对象