DevEco Studio 实战第一节：字符串拼接与组件构建
引言
在现代软件开发中，TypeScript 提供了强类型的优势，而 DevEco Studio 作为华为推出的开发集成环境，提供了便捷的代码管理和版本控制功能。本文将通过一个简单的示例，介绍如何在 TypeScript 和 DevEco Studio 中进行字符串拼接以及如何构建基本的组件。
第一节
1.1 字符串拼接
在 TypeScript 中，字符串拼接是一个常见的操作，可以通过加号（+）运算符来实现。当加号两边至少有一个是字符串时，它将执行字符串拼接操作。
示例代码
let name: string = 'thewang';let age: number = 19;
console.log('Personal information:', 'name' + name);console.log('Personal information:', 'age' + age.toString());
复制代码
注意点
1.2 数字求和示例
let num1: number = 100;let num2: number = 200;console.log('totality', num1 + num2);
复制代码
1.示例
let name: string = 'thewang'let age: number = 19console.log('Personal information:', 'name' + name);console.log('Personal information:', 'age' + age.toString());
let num1: number = 100let num2: number = 200console.log('Personal information:', 'name' + name);console.log('Personal information:', 'age' + age.toString());
@Entry@Componentstruct Index { @State message: string = 'Hello World';
build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') }}
复制代码
运行结果
2.1 模板字符串的基本使用
模板字符串允许你在字符串中直接嵌入变量和表达式，通过 ${expression} 的形式插入。这种方式使得字符串拼接更加直观和简洁。
示例代码
let name: string = 'thewang';let age: number = 19;// 使用模板字符串拼接信息console.log(`Personal information：name: ${name}, age: ${age}`);
复制代码
3.字符串与数字的转换
3.1 Number() 函数
Number() 函数用于将字符串转换为数字。如果字符串是有效的数字格式，它将被转换为相应的数字；否则，结果将是 NaN（Not a Number）。
示例代码
let str1: string = '1.1';let str2: string = '1.8a';let str3: string = 'a';
console.log('Number', Number(str1)); // 1.1console.log('Number', Number(str2)); // 1.8console.log('Number', Number(str3)); // NaN
复制代码
3.2 parseInt() 函数
parseInt() 函数用于将字符串转换为整数，它会自动忽略字符串中的非数字字符，直到遇到第一个非数字字符为止，然后停止解析。
示例代码
console.log('parseInt', parseInt(str1)) // 1console.log('parseInt', parseInt(str2)) // 1console.log('parseInt', parseInt(str3)) // NaN
复制代码
3.3 parseFloat() 函数
parseFloat() 函数用于将字符串转换为浮点数，它也会忽略字符串中的非数字字符，直到遇到第一个非数字字符为止，然后停止解析。
示例代码
console.log('parseFloat', parseFloat(str1)) // 1.1console.log('parseFloat', parseFloat(str2)) // 1.8console.log('parseFloat', parseFloat(str3)) // NaN
复制代码
示例代码
let str1: string = '1.1';let str2: string = '1.8a';let str3: string = 'a';
console.log('Number', Number(str1)); // 1.1console.log('Number', Number(str2)); // 1.8console.log('Number', Number(str3)); // NaN
console.log('parseInt', parseInt(str1)) // 1console.log('parseInt', parseInt(str2)) // 1console.log('parseInt', parseInt(str3)) // NaN
console.log('parseFloat', parseFloat(str1)) // 1.1console.log('parseFloat', parseFloat(str2)) // 1.8console.log('parseFloat', parseFloat(str3)) // NaN
@Entry@Componentstruct Index { @State message: string = 'Hello World';
build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') }}
复制代码
运行结果
4. 数字转字符串
4.1 toString() 方法
toString() 方法用于将数字转换为字符串。这个方法可以接受一个参数，即基数（从 2 到 36），用于指定转换的进制。如果不指定参数，默认使用 10 进制。
示例代码
let money: number = 100;// 将数字转换为字符串console.log('toString:', money.toString());
复制代码
4.2 toFixed() 方法
toFixed() 方法用于将数字转换为字符串，并保留指定的小数位数。这个方法会自动进行四舍五入。
示例代码
// 将数字转换为字符串，并保留小数点后0位console.log('toFixed:', money.toFixed());
// 将数字转换为字符串，并保留小数点后2位console.log('toFixed:', money.toFixed(2));
复制代码
示例代码
let money: number = 100console.log('toString:', money.toString())console.log('toFixed:', money.toFixed())console.log('toFixed:', money.toFixed(2))
@Entry@Componentstruct Index { @State message: string = 'Hello World';
build() { Row() { Column() { Text('商品价格: ¥' + money.toFixed(2)) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') }}
复制代码
运行结果
组件解释
@Entry 和 @Component：这些装饰器用于标记这是一个组件的入口点，并且定义了一个组件。
@State：用于定义组件的状态，类似于 React 中的 state。
build 方法：这是组件的构建方法，返回组件的 UI 结构。
Row 和 Column：这些可能是布局组件，用于创建行和列的布局。
Text：用于显示文本的组件。
样式设置 ：.fontSize(50) 和 .fontWeight(FontWeight.Bold) 分别用于设置字体大小和字体权重。
结语
通过本文，我们学习了 TypeScript 中的字符串与数字转换技巧以及如何在 DevEco Studio 中构建基本的组件。这些基础知识将为进一步学习前端开发和使用 DevEco Studio 打下坚实的基础。希望本文能够帮助你更好地理解和应用这些技术。
评论