前端切图仔,常用的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!
相关文章
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
762 1
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
294 8
|
前端开发
前端使用正则表达式检查是否为十六进制字符串
前端使用正则表达式检查是否为十六进制字符串
340 6
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1154 5
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
492 5
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
500 3
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
1023 0
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
671 0
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
829 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1258
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    572
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    434
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    436
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    549
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    727
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1414
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    315
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1168
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    509