DevEco Studio 实战第一节：字符串拼接与组件构建原创

The旺

发布于 2024-11-29 22:03

浏览

1收藏

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.
3.
4.
5.

注意点

字符串与数字拼接 ：当加号两边至少有一个是字符串时，另一个数字会被转换成字符串，然后进行拼接。这里使用 toString() 方法将数字转换为字符串。
加号的双重作用：如果两边都是数字，加号将执行求和操作。

1.2数字求和示例

let num1: number = 100;
let num2: number = 200;
console.log('totality', num1 + num2);
1.
2.
3.

1.示例

let name: string = 'thewang'
let age: number = 19
console.log('Personal information:', 'name' + name);
console.log('Personal information:', 'age' + age.toString());

let num1: number = 100
let num2: number = 200
console.log('Personal information:', 'name' + name);
console.log('Personal information:', 'age' + age.toString());


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

2.1模板字符串的基本使用

模板字符串允许你在字符串中直接嵌入变量和表达式，通过 ${expression} 的形式插入。这种方式使得字符串拼接更加直观和简洁。

示例代码

let name: string = 'thewang';
let age: number = 19;
// 使用模板字符串拼接信息
console.log(`Personal information：name: ${name}, age: ${age}`);
1.
2.
3.
4.

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.1
console.log('Number', Number(str2)); // 1.8
console.log('Number', Number(str3)); // NaN
1.
2.
3.
4.
5.
6.
7.

3.2 parseInt() 函数

parseInt() 函数用于将字符串转换为整数，它会自动忽略字符串中的非数字字符，直到遇到第一个非数字字符为止，然后停止解析。

示例代码

console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // NaN
1.
2.
3.

3.3 parseFloat() 函数

parseFloat() 函数用于将字符串转换为浮点数，它也会忽略字符串中的非数字字符，直到遇到第一个非数字字符为止，然后停止解析。

示例代码

console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.8
console.log('parseFloat', parseFloat(str3)) // NaN
1.
2.
3.

示例代码

let str1: string = '1.1';
let str2: string = '1.8a';
let str3: string = 'a';

console.log('Number', Number(str1)); // 1.1
console.log('Number', Number(str2)); // 1.8
console.log('Number', Number(str3)); // NaN

console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // NaN

console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.8
console.log('parseFloat', parseFloat(str3)) // NaN

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

4. 数字转字符串

4.1 toString() 方法

toString() 方法用于将数字转换为字符串。这个方法可以接受一个参数，即基数（从2到36），用于指定转换的进制。如果不指定参数，默认使用10进制。

示例代码

let money: number = 100;
// 将数字转换为字符串
console.log('toString:', money.toString());
1.
2.
3.

4.2 toFixed() 方法

toFixed() 方法用于将数字转换为字符串，并保留指定的小数位数。这个方法会自动进行四舍五入。

示例代码

// 将数字转换为字符串，并保留小数点后0位
console.log('toFixed:', money.toFixed());

// 将数字转换为字符串，并保留小数点后2位
console.log('toFixed:', money.toFixed(2));
1.
2.
3.
4.
5.

示例代码

let money: number = 100
console.log('toString:', money.toString())
console.log('toFixed:', money.toFixed())
console.log('toFixed:', money.toFixed(2))

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text('商品价格: ¥' + money.toFixed(2))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

组件解释

@Entry 和 @Component：这些装饰器用于标记这是一个组件的入口点，并且定义了一个组件。
@State：用于定义组件的状态，类似于 React 中的 state。
build 方法：这是组件的构建方法，返回组件的 UI 结构。
Row 和 Column：这些可能是布局组件，用于创建行和列的布局。
Text：用于显示文本的组件。
样式设置 ：.fontSize(50) 和 .fontWeight(FontWeight.Bold) 分别用于设置字体大小和字体权重。

结语

通过本文，我们学习了 TypeScript 中的字符串与数字转换技巧以及如何在 DevEco Studio 中构建基本的组件。这些基础知识将为进一步学习前端开发和使用 DevEco Studio 打下坚实的基础。希望本文能够帮助你更好地理解和应用这些技术。

分类

标签

51CTO

51CTO博客

51CTO学堂

DevEco Studio 实战第一节：字符串拼接与组件构建原创

DevEco Studio 实战第一节：字符串拼接与组件构建

引言

第一节

1.1字符串拼接

示例代码

注意点

1.2数字求和示例

1.示例

运行结果

2.1模板字符串的基本使用

示例代码

3.字符串与数字的转换

3.1 Number() 函数

示例代码

3.2 parseInt() 函数

示例代码

3.3 parseFloat() 函数

示例代码

示例代码

运行结果

4. 数字转字符串

4.1 toString() 方法

示例代码

4.2 toFixed() 方法

示例代码

示例代码

运行结果

组件解释

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

DevEco Studio 实战第一节：字符串拼接与组件构建 原创

DevEco Studio 实战第一节：字符串拼接与组件构建

引言

第一节

1.1字符串拼接

示例代码

注意点

1.2数字求和示例

1.示例

运行结果

2.1模板字符串的基本使用

示例代码

3.字符串与数字的转换

3.1 Number() 函数

示例代码

3.2 parseInt() 函数

示例代码

3.3 parseFloat() 函数

示例代码

示例代码

运行结果

4. 数字转字符串

4.1 toString() 方法

示例代码

4.2 toFixed() 方法

示例代码

示例代码

运行结果

组件解释

结语

目录

订阅鸿蒙技术特刊，精选内容抢先看

DevEco Studio 实战第一节：字符串拼接与组件构建原创