服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 五种在 JavaScript 中获取字符串第一个字符的方法

五种在 JavaScript 中获取字符串第一个字符的方法

2022-12-08 16:58web前端开发 js教程

在本文中,我们将研究多种方法来轻松获取 JavaScript 中字符串的第一个字符。

在本文中,我们将研究多种方法来轻松获取 JavaScript 中字符串的第一个字符。

五种在 JavaScript 中获取字符串第一个字符的方法

1. charAt() 方法

要获取字符串的第一个字符,我们可以在字符串上调用 charAt() ,将 0 作为参数传递。例如,str.charAt(0) 返回 str 的第一个字符。

const str = 'Coding Beauty'; const firstChar = str.charAt(0); console.log(firstChar); // C

StringcharAt()返回指定索引处字符串的字符,第一个字符的索引为 0。

2.括号表示法([])属性访问

要获取字符串的第一个字符,我们也可以使用括号表示法 ([]) 访问字符串的 0 属性:

const str = 'Coding Beauty'; const firstChar = str['0']; console.log(firstChar); // C

当属性名称是无效的 JavaScript 标识符时,括号表示法属性访问是点表示法的有用替代方法。例如,尝试使用点表示法访问 0 属性将导致语法错误,因为 0 不是有效标识符:

const str = 'Coding Beauty'; // SyntaxError: Unexpected number const firstChar = str.0; console.log(firstChar);

笔记1

由于 0 是一个整数,我们不需要用引号将它括起来来访问它:

const str = 'Coding Beauty'; // Quotes are not needed to pass 0 const firstChar = str[0]; console.log(firstChar); // C

笔记2

访问不存在的属性在 JavaScript 中返回 undefined。这与返回空字符串 ('') 的 charAt() 不同:

const str = 'Coding Beauty'; const char1 = str[20]; const char2 = str.charAt(20); console.log(char1); // undefined console.log(char2); // '' (empty string)

3.substring()方法

使用此方法,我们在字符串上调用 substring(),将 0 作为第一个参数传递,将 1 作为第二个参数传递。

const str = 'Coding Beauty'; const firstChar = str.substring(0, 1); console.log(firstChar); // C

substring() 方法返回开始索引和结束索引之间的字符串部分,这两个索引分别由第一个和第二个参数指定。索引 0 和 1 之间的子字符串是仅包含第一个字符串字符的子字符串。

4. slice() 方法

使用此方法,我们在字符串上调用 slice(),将 0 作为第一个参数传递,将 1 作为第二个参数传递。

const str = 'Coding Beauty'; const firstChar = str.slice(0, 1); console.log(firstChar); // C

slice() 方法提取开始和结束索引之间的一部分字符串,这两个索引分别由第一个和第二个参数指定。索引 0 和 1 之间的子字符串是仅包含第一个字符串字符的子字符串。

笔记

slice() 和 substring() 方法在我们的用例中的工作方式类似,但并非总是如此。它们之间的一个区别是,如果第一个大于第二个,则 substring() 交换其参数,而 slice() 返回一个空字符串:

const str = 'Coding Beauty'; const subStr1 = str.substring(6, 0); const subStr2 = str.slice(6, 0);// Equivalent to str.substring(0, 6)console.log(subStr1); // Codingconsole.log(subStr2); // '' (empty string)

5.at()方法

获取字符串第一个字符的另一种方法是使用 String at() 方法。我们在字符串上调用 at(),将 0 作为参数传递。

const str = 'Coding Beauty';
const firstChar = str.at(0);
console.log(firstChar); // C

at() 方法返回指定索引处字符串的字符。

笔记

当负整数传递给 at() 时,它从最后一个字符串字符开始倒数。这与返回空字符串的 charAt() 不同:

const str = 'Coding Beauty'; const char1 = str.at(-3); const char2 = str.charAt(-3); console.log(char1); // u console.log(char2); // '' (empty string)

写在最后

这5种方式虽然都可以实现从JavaScript中获取字符串中第一个字符串的方法,但是具体使用那种情况,我们还是需要根据具体开发项目来,选择最适合最优的方案。

原文地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649134543&idx=1&sn=299a95bc8626db712a5a0c67a1d34c43

延伸 · 阅读

精彩推荐
  • js教程微信小程序请求前置的方法详解

    微信小程序请求前置的方法详解

    这篇文章主要给大家介绍了关于微信小程序请求前置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    ok同学9892022-02-15
  • js教程js canvas实现圆形流水动画

    js canvas实现圆形流水动画

    这篇文章主要为大家详细介绍了js canvas实现圆形流水动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    莫兮是我11072022-03-06
  • js教程小程序实现商品属性选择或规格选择

    小程序实现商品属性选择或规格选择

    这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    纸上画佳人12032022-02-17
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡9062021-12-15
  • js教程如何在CocosCreator中使用JSZip压缩

    如何在CocosCreator中使用JSZip压缩

    这篇文章主要介绍了在CocosCreator中使用JSZip压缩,对JSZip感兴趣的同学,不妨看一下,并且亲自试一试...

    gamedaybyday8452022-03-05
  • js教程JavaScript WeakMap使用详解

    JavaScript WeakMap使用详解

    这篇文章主要介绍了JavaScript WeakMap使用的详细介绍,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    MDN7232022-01-17
  • js教程微信小程序使用视频播放器video组件

    微信小程序使用视频播放器video组件

    这篇文章主要为大家详细介绍了微信小程序使用视频播放器video组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一...

    柚子·小哥哥6572022-03-09
  • js教程如何在CocosCreator中使用http和WebSocket

    如何在CocosCreator中使用http和WebSocket

    这篇文章主要介绍了在Cocos Creator中使用的Http和WebSocket,对websocket感兴趣的同学,一定要看下...

    gamedaybyday6512022-03-03