前端js中将YAML文本赋值给变量，并使用js-yaml插件来解析

时间:2025/7/9 23:20:36来源：https://blog.csdn.net/m0_46672781/article/details/140922883 浏览次数:0次

关于YAML 语言教程,点击详解
在线解析学习点击yaml to json

你可以在JavaScript中将一段YAML文本赋值给变量。为了保持YAML的格式和可读性，使用模板字符串（反引号 `）是一个好方法。 因为以下原因：
在 JavaScript 中，模板字符串和普通字符串的区别主要在于如何处理换行和插值。

模板字符串（Template Literals）

使用反引号（`）：模板字符串使用反引号包围。
多行字符串：允许直接在字符串中包含换行符。
字符串插值：可以使用 ${} 进行变量或表达式插值。

示例：

const yamlText = `
title: Example YAML
description: This is a sample YAML document
items:- name: Item 1quantity: 10- name: Item 2quantity: 5
metadata:created: 2024-08-03author: John Doe
`;

普通字符串

使用单引号（'）或双引号（"）：普通字符串使用单引号或双引号包围。
不支持多行字符串：换行符会导致语法错误，必须使用换行字符（\n）或者字符串连接来表示多行内容。
不支持插值：不能直接在字符串中插入变量或表达式。

示例（会导致语法错误）：

const yamlText = "
title: Example YAML
description: This is a sample YAML document
items:- name: Item 1quantity: 10- name: Item 2quantity: 5
metadata:created: 2024-08-03author: John Doe
";

为什么普通字符串会语法错误？

普通字符串不能包含换行符，因此在赋值包含换行符的字符串时会导致语法错误。下面是如何使用普通字符串表示多行文本的方法：

但可以使用换行字符（`\n`）：

const yamlText = "title: Example YAML\ndescription: This is a sample YAML document\nitems:\n  - name: Item 1\n    quantity: 10\n  - name: Item 2\n    quantity: 5\nmetadata:\n  created: 2024-08-03\n  author: John Doe";

也可以使用字符串连接（`+`）：

const yamlText = "title: Example YAML\n" +
"description: This is a sample YAML document\n" +
"items:\n" +
"  - name: Item 1\n" +
"    quantity: 10\n" +
"  - name: Item 2\n" +
"    quantity: 5\n" +
"metadata:\n" +
"  created: 2024-08-03\n" +
"  author: John Doe";

总结

模板字符串（使用反引号）支持多行文本和插值，适用于包含换行符的文本内容，如 YAML。普通字符串（使用单引号或双引号）不支持直接包含换行符，需要使用换行字符或字符串连接，处理起来较为繁琐。

在Vue前端项目中使用 `js-yaml` 来解析 YAML 文本，可以按照以下步骤进行：

1. 安装 `js-yaml`

首先，在项目目录下安装 js-yaml 依赖：

npm install js-yaml
或者
yarn add js-yaml

2. 创建 Vue 组件

接下来，在 Vue 组件中使用 js-yaml 解析 YAML 文本。例如，创建一个组件 YamlParser.vue：

<template><div><h2>Parsed YAML Data</h2><pre>{{ parsedYaml }}</pre></div>
</template><script>
import yaml from 'js-yaml';export default {data() {return {yamlText: `title: Example YAMLdescription: This is a sample YAML documentitems:- name: Item 1quantity: 10- name: Item 2quantity: 5metadata:created: 2024-08-03author: John Doe`,parsedYaml: null,};},created() {try {this.parsedYaml = yaml.load(this.yamlText);this.yamlText = yaml.dump(this.parsedYaml);} catch (e) {console.error('Error parsing YAML:', e);}},
};
</script><style scoped>
pre {background: #f4f4f4;padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}
</style>

3. 使用组件

可以使用 js-yaml 的 load 方法将 YAML 文本转换为 JavaScript 对象
可以使用 js-yaml 的 dump 方法将 JavaScript 对象转换为 YAML 文本

在你的 App.vue 或其他父组件中使用 YamlParser.vue 组件：

<template><div id="app"><YamlParser /></div>
</template><script>
import YamlParser from './components/YamlParser.vue';export default {name: 'App',components: {YamlParser,},
};
</script>